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 臃肿