Vuex笔记
Posted by Mars . Modified at
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:
- 从vuex引入
useStore
方法:import {useStore} from 'vuex'
; - 在setup函数中创建
store
引用:const store = useStore();
。
- 从vuex引入
- 选项式API:
核心概念
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,根节点状态会作为第三个参数暴露出来;