Vuex笔记

Posted by Mars . Modified at Sep 2, 2021

Vuex: 中心型状态管理工具

核心概念和基本操作

安装使用

npm 安装: npm i vuex@next;
在main.js引入：import { createStore } from 'vuex';

创建新store(vuex仓库实例):

const store = createStore({
 state(){
     return {
       // states....
     };
 },
 mutations: {
   // mutations...
 },
 // others...
});

作为插件挂载到Vue APP实例上： app.use(store);
在组件内获取store实例的方式：
- 选项式API：this.$store;
- 组合式API：
  1. 从vuex引入useStore方法: import {useStore} from 'vuex';
  2. 在setup函数中创建store引用：const store = useStore();。

核心概念

Store

每一个Vuex状态库实例，叫做一个Store。

通过vuex的createStore(<options>)方法生成。

State

被管理的响应式状态，也就是MVVM中的Model。

被所有用到这个store的组件共享，组件内获取的state也是响应式的，会随着store中state的改变自动更新。

Getter

相当于vuex store中的computed属性。

使用一些state计算得出的响应式属性。和computed选项式api定义方式一样，值为一个函数，不同的是:

vuex中自动以state作为第一个参数传入；
第二个参数为getters对象，也就是说可以在一个getter中引用其他getter。

{
  //...
  getters: {
    getter1: function(state, getters){
      //do something with state and return...
      // eg. return state.A + getters.getter2;
    }
  }
}

Mutation

注册的可用于更改state值的方法。用store.commit()方法触发。

提交mutation，是唯一的更改store中state的方法。

// in component:
this.$store.commit('mutationName', payload);

mutation同样以state做为第一个参数。

在提交mutation时，可以提供额外的参数(payload)，从mutation方法的第二个参数开始传入。

mutation含义为突变，它设计的功能是：调用后立即改变state，因此理论上必须是同步函数。

mutation设为异步函数也不会报错，但是会导致状态更新顺序难以捉摸，增加调试难度。

Action

action用于提交mutation，它可以包含任意异步操作（可以不直接立即更改状态）。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

action用store的dispatch方法触发，第一个参数为context，第二次参数同样可以传入一个payload。

// in vuex store config obj..
actions: {
  action1 (context) {
    // action用于提交mutation.
    context.commit('mutation1')
  }
}

// in component
this.$store.dispatch('action1');

Module

使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

// 官方代码，简单明了
const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象；
对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState；
对于模块内部的 getter，根节点状态会作为第三个参数暴露出来；

基本操作

Keywords: Vue Vuex