Vuex 高级技巧与最佳实践

1. 使用 map 辅助函数简化代码：

   javascript

   import { mapState, mapGetters } from 'vuex'export default {computed: {...mapState(['num']),...mapGetters(['doubleNum'])}
   }
   

2. 模块化开发：

   javascript

   // modules/student.js
   export default {namespaced: true,state: { list: [] },mutations: {ADD(state, item) {state.list.push(item)}}
   }// store/index.js
   import student from './modules/student'export default new Vuex.Store({modules: { student }
   })
   

3. 数据持久化配置：

   javascript

   import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({plugins: [createPersistedState({storage: window.sessionStorage})]
   })
   

4. 核心概念对比表：

   概念	作用	触发方式	特点
   State	存储应用级状态	直接访问	响应式数据
   Mutations	修改 State 的唯一方式	commit	同步操作
   Actions	处理异步逻辑	dispatch	可触发 Mutations
   Getters	对 State 的计算属性	直接访问	缓存计算结果
   Modules	分割大型状态树	模块化导入	避免单一 Store 臃肿