Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
状态自管理应用包含以下几个部分:
- 状态,驱动应用的数据源;
- 视图,以声明方式将状态映射到视图;
- 操作,响应在视图上的用户输入导致的状态变化。
安装vuex:yarn add vuex@next --save
安装Vuex 之后,应创建一个 store。提供一个初始 state 对象和一些 mutation
import { createStore } from 'vuex'
import number from './state/num.state.js'
import uInfo from './state/userinfo.js'
export default createStore({
//数据比较多,分模块
modules: {
number,
uInfo
}
})
核心概念
State 单一状态数
单一状态数让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照
Getters
对state里面的状态进行过滤处理,用法与组件自身的计算属性一模一样
Mutation
每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler) 。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。要唤醒一个 mutation 处理函数,你需要以相应的 type 调用 store.commit 方法
Action
Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters
Module
为了解决当应用变得非常复杂时,store 对象就有可能变得相当臃肿,Vuex 允许我们将 store 分割成模块(module) 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
小实例
state: {
count:1,
},
//计算state,获取对应的值
getters: {
countStatus(state){
return state.count>=1
}
},
//更新状态的方法-更新state的唯一方法,commit mutations
mutations: {
setCount(state,num){
state.count=num
}
},
//可以异步操作,可以返回promise,更改数据还是传递到mutations去更改
actions: {
setCountPromise(context,num){
return new Promise((resolve,reject)=>{
if(num>100){
reject("值不能大于100")
}else{
context.commit('setCount',num)
resolve()
}
})
}
},
//数据比较多,分模块
modules: {
}