Vue's data state manager Vuex

1. What is Vuex

Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and ensures that the state changes in a predictable way with corresponding rules.

Previously, we summarized how to transfer parameters in parent-child components, which is relatively simple to implement

However, in development, page or unrelated component parameters are used more frequently, which requires the use of Vuex data state manager

2. When should I use Vuex?

If you don't plan to develop large single page applications, using Vuex can be cumbersome and redundant. If your application is simple enough, you'd better not use Vuex. A simple store mode is enough for you. However, if you need to build a large and medium-sized single page application, you are likely to consider how to better manage the state outside the component, and Vuex will become a natural choice.

3. Design model of Vuex

4. Basic concepts

state is equivalent to data storage in VUE

getters are equivalent to computed calculation properties in VUE

Iterations are equivalent to methods in VUE

actions for asynchronous execution of rotations

5. Component binding helper

mapState,mapGetters,mapActions,mapMutations
The purpose is to mix the state and getters defined in vuex into the computed of vue

Mix mutaions and actions defined in vuex into methods in vue

All auxiliary functions accept list or dictionary format parameters

Dictionary format can override and name attribute names defined in vuex

Global registration of auxiliary functions in Vuex can greatly reduce code writing

6. A complete list of Vuex use cases:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/vuex.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      //Get through state: {$store.state.num}}}
      <br> 
      //Use mapState to get: {{{u num}}
      <br>
      <br><br>
      //Use getters to get: {{$store.getters.getNum}}}
      <br>
      //Use mapGetters to get: {{{u getNum}}}
      <br>
      <br><br>
      <span @click="addNumByMutation(5)">adopt mutations Method setting(Not recommended)</span>
      <br>
      <span @click="_addNum(5)">adopt mapMutations Method setting(Not recommended)</span>
      <br>
      <br><br>
      <span @click="reduceNumByAction(5)">adopt actions Method setting(Recommend)</span>
      <br>
      <span @click="reduceNumAsync(5)">adopt mapActions Method setting(Recommend)</span>
  
    </div>
    
    <script type="text/javascript">
      let store = new Vuex.Store({
        state:{
          num:10
        },
        getters:{
          getNum(state){
            return state.num;
          }
        },
        mutations:{
          addNum(state,num){
            state.num+=num
          }
          
        },
        actions:{
          reduceNumAsync(context,num){
            context.commit("addNum",-num)
          }
        },

      })
      const vm = new Vue({
        el:"#app",
        data:{
          
        },
        store,
        methods:{
          addNumByMutation(num){
            this.$store.commit("addNum",num);
          },
          // Use the object expansion operator to blend the mutations object into the methods object and use this.addNum() instead of this.$store.commit("addNum");
          // ...Vuex.mapMutations(["addNum"]),
          // Using object format to name the rotations property
          ...Vuex.mapMutations({"_addNum":"addNum"}),
          
          
          reduceNumByAction(num){
            this.$store.dispatch("reduceNumAsync",num).then((a,b)=>{
              console.log("Completion of subtraction");
            })
          },
          // Use the object expansion operator to blend the actions object into the methods object and use this.addNum() instead of this.$store.commit("addNum");
          ...Vuex.mapActions(["reduceNumAsync"]),
          // Use the object format to rename the actions property
          ...Vuex.mapActions({"_reduceNum":"reduceNumAsync"})

        },
        computed:{
          
          
          // Use the object expansion operator to blend the state object into the computed object and use "num" instead of this.$store.state.num
          // ...Vuex.mapState(["num"]),
          // Use the object format to rename the state property
          ...Vuex.mapState({_num:"num"}),
          
          
          
          // Use object expansion operator to mix getter into computed object and use individual ﹐ getNum instead of this.$store.getters.getNum
          // ...Vuex.mapGetters(["getNum"]),
          // Use object format to rename getter properties
          ...Vuex.mapGetters({_getNum:"getNum"}),
          
        }
      })
</script>
  </body>
</html>

Published 17 original articles, won praise 5, visited 9248
Private letter follow

Tags: Vue Javascript Attribute

Posted on Sat, 14 Mar 2020 09:37:35 -0400 by tazgalsinh