Vuex官方例子解读

Vuex
Vue
发布日期:   2019-11-13
更新日期:   2026-09-08
文章字数:   446
阅读时长:   1 分
阅读次数:  

安装

npm i vuex
// or
yarn add vuex

Vuex 是什么

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

核心概念

  • State
    • 单一状态树，用一个对象就包含了全部的应用层级状态
  • Getter
    • 相当于 State 的计算属性
  • Mutation
    • 提交 mutation是更改 store 中状态的唯一方法, 相当于事件
  • Action
    • 类似于 mutation, 但 Action 提交的是 mutation，而不是直接变更状态，而且可以包含任意异步操作
  • Module
    • 将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter
  • 官方购物车项目结构
├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

注意点

  • 在 mutation-types.js 中定义类型常量，默认全部大写 —> 把常量放在单独的文件中可以让你的代码合作者或者迭代者对整个 app 包含的 mutation 一目了然
  • Vuex- Action的 { commit }
// Vuex 中 使用 Action 处理异步请求时，常规写法如下
getMenuAction:(context) =>{
    context.commit('SET_MENU_LIST',['承保2','核保2'])
}
// 我们也可以使用如下简化写法，如下
actions:{
    getMenuAction:({commit}) =>{
        commit(‘SET_MENU_LIST’,[‘承保2’,’核保2’])
    }
}

// { commit } 是变量解构赋值
context = { 
    dispatch: local.dispatch,
    commit: local.commit,
    getters: local.getters,
    state: local.state,
    rootGetters: store.getters,
    rootState: store.state
}
// 常规写法 context.commit = context.local.commit
// 使用变量解构赋值后 { commit } 相当于 commit= context.commit

// state 同理
Vuex
  目录