-
使用 map 辅助函数简化代码:
javascript
import { mapState, mapGetters } from 'vuex'export default {computed: {...mapState(['num']),...mapGetters(['doubleNum'])} }
-
模块化开发:
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 } })
-
数据持久化配置:
javascript
import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({plugins: [createPersistedState({storage: window.sessionStorage})] })
-
核心概念对比表:
概念 作用 触发方式 特点 State 存储应用级状态 直接访问 响应式数据 Mutations 修改 State 的唯一方式 commit 同步操作 Actions 处理异步逻辑 dispatch 可触发 Mutations Getters 对 State 的计算属性 直接访问 缓存计算结果 Modules 分割大型状态树 模块化导入 避免单一 Store 臃肿