久久建筑网能否下载资料_b站推广网站2023年_企业危机公关_seo快速排名工具

知识结构

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(() => {// 最终还是使用的commitcontext.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')`})}
  }