简单说明vuex

知识结构

vue用于管理公共数据的仓库

配置

• state：所有公共数据的初始状态（初始值）

  export default {
    state: {
      count: 0,
    }
  };
  

• mutations：修改state内容的方法（必须为同步方法）

  export default {
    state: {
      count: 0,
    },
    mutations: {
    	increase(state,payload){
    		state.count += payload;
    	}
    }
  };
  

• actions：修改state内容的异步相关方法，也需要通过mutations中的方法进行最终修改

  export default {
    state: {
      count: 0,
    },
    mutations: {
    	increase(state,payload){
    		state.count += payload;
    	}
    },
    actions: {
    	asycIncrease(context,payload){
    		setTimeout(() => {
            context.commit('increase',10);
          }, 1000)
    	}
    }
  };
  

• getters：仓库内的计算属性

  export default {
    state: {
      count: 0,
    },
    mutations: {
    	increase(state,payload){
    		state.count += payload;
    	}
    },
    actions: {
    	asycIncrease(context,payload){
    		setTimeout(() => {
            context.commit('increase',10);
          }, 1000)
    	}
    },
    getters: {
      power (state) {
        return state.count ** state.count;
      }
    }
  };
  

• modules：在仓库内容过多时，避免命名重复或为了结构清晰，可以分为不同的module以此来区分

  // 在创建仓库时配置
  const store = createStore({
    modules: {
      a: moduleA,
      b: moduleB
    }
  })
  

• 完整示例配置

  // store配置
  import Vuex from "vuex";
  import Vue from "vue";
  import count from "./count";
  import abc from "./abc";
  Vue.use(Vuex);
  
  const store = new Vuex.Store({
    modules: {
      count,
      abc,
    },
    strict: true, // 开启严格模式
  });
  
  
  export default store;
  

  // count module 配置
  export default {
    // namespaced: true, // 开启命名空间
    state: {
      count: 0,
    },
    mutations: {
    	increase(state,payload){
    		state.count += payload;
    	}
    },
    actions: {
    	asycIncrease(context,payload){
    		setTimeout(() => {
            context.commit('increase',10);
          }, 1000)
    	}
    },
    getters: {
      power (state) {
        return state.count ** state.count;
      }
    }
  };
  

  // abc module 配置
  export default {
    state: {
      abc: '',
    },
    mutations: {
    	set(state,payload){
    		state.abc = payload;
    	}
    },
    actions: {
    	asycIncrease(context,payload){
    		setTimeout(() => {
            // 最终还是使用的commit
            context.commit('set',"well");
          }, 1000)
    	}
    }
  };
  

• strict: true，开启严格模式

  规定state中的状态只能通过mutations中的方法改变，但是其实也可以直接使用this.$store.state.count = 1这种改变状态，开启严格模式后使用直接赋值时就会报错

• namespaced: true，开启命名空间

  当不同module中有同名的方法时，直接commit就容易混乱，打开命名空间后，调用方法就必须加上此module名作为前缀，如下：

  import Vue from "vue";
  import store from "./store";
  
  const num = store.getters["count/power"];
  

调用

• commit

  用于调用mutations中的方法

  <template>
    <div>
      <div id="button">
        <button @click="handleClick">button</button>
      </div>
    </div>
  </template>
  
  <script>
  import Vue from "vue";
  import store from "./store";
  export default {
    methods: {
      handleClick(){
      	store.commit("count/increase",1);
      }
    },
  };
  </script>
  

• dispatch

  用于调用异步方法

  <template>
    <div>
      <div id="button">
        <button @click="handleClick">button</button>
      </div>
    </div>
  </template>
  
  <script>
  import Vue from "vue";
  import store from "./store";
  export default {
    methods: {
      handleClick(){
      	store.dispatch("count/asycIncrease",2);
      }
    },
  };
  </script>
  

• mapState：用于让我们方便的使用计算属性封装state，有多种写法

  import { mapState } from 'vuex'
  
  export default {
    computed: mapState({
      count: state => state.count,
    })
  }
  
  export default {
    computed: {
        count: ...mapState("count", ["count"]);
    }
  }
  

• mapGetters：将 store 中的 getter 映射到局部计算属性，这种map函数几乎都是这样的作用

  import { mapGetters } from 'vuex'
  
  export default {
    computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
      ...mapGetters('count',[
        'power'
      ])
    }
  }
  

• mapMutations：简化函数封装

  import { mapMutations } from 'vuex'
  
  export default {
    // ...
    methods: {
      ...mapMutations('count',[
        'increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
      ]),
    }
  }
  

• mapActions：简化异步方法封装

  import { mapActions } from 'vuex'
  
  export default {
    methods: {
      ...mapActions('count',[
        'asycIncrease', // 将 `this.asycIncrease()` 映射为 `this.$store.dispatch('asycIncrease')`
      })
    }
  }