当前位置：首页 > article >正文

Vuex 高级技巧与最佳实践

article 2025/3/16 18:37:05

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