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

2019-11-13 图床

Vuex官方例子解读

安装

Vuex 是什么

核心概念

注意点

得闲饮茶啦