Vuex官方例子解读

安装

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 同理