本文共 1668 字，大约阅读时间需要 5 分钟。

Vuex 应用实例解析
安装与初始化
安装 vuex 包括两步：首先通过 npm 安装，接着在主应用文件中初始化 store。
prenpm install vuex --save/template
在 main.js 中加入以下代码：
preimport vuex from 'vuex'Vue.use(vuex)const store = new Vuex.Store({  state: {    show: false  }})/template
最后，将 store 对象传递给 Vue 实例：
prenew Vue({  el: '#app',  store,  // 其他配置})/template
模块化管理状态
将 store 分离到 src/directory 下的 store/index.js 中：
preimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  modules: {    dialog: dialogStore // 假设 dialogStore 是单独管理对话框的 store  }})/template
创建子组件专属的 store
创建 dialog_store.js：
preexport default {  state: {    show: false  }}/template
在主 store 中引用：
premodules: {  dialog: dialogStore}/template
改写传统的状态管理方式
不再需要直接修改父组件传递的参数，而是通过 vuex store 来统一管理状态：
父组件按钮点击改用：
pre@click="$store.commit('switch_dialog')"/template
子组件引用 store:", state 进行计算：
pretemplate Eisenhower:projectId康tel:visible.sync="$store.state.dialog.show"/template
mutations 与 actions 分别处理
mutations 用于直接修改状态，简单易懂；actions 用于多次调用 mutations，保持操作的单一性。
在 dialog_store.js 中：
preexport default {  state: {    show: false  },  mutations: {    switchDialog(state) {      state.show = !state.show    }  },  actions: {    switchDialog(context) {      context.commit('switchDialog')    }  }}/template
 getters 提取计算状态
复杂的状态计算转化为 getters，方便多处复用。
preexport default {  state: {    show: false  },  getters: {    notShow(state) {      return !state.show    }  },  // 其他功能}/template
Vuex 此法优于直接使用 state
避免了 state 直接暴露在组件中，提升代码模块化程度：
在组件中改用 mapState 提取状态：
pre
   /template
总结 Plus 小贴士
1. mapState、mapActions、mapGetters 提供更简洁的写法，避免繁琐
2. mutations 里的操作必须同步，不能有异步操作（官方建议）
3. 状态管理要按模块化分开，维护更方便
4. 使用 tools: ' preload' 可提升初始加载速度

转载地址：http://sazjz.baihongyu.com/