Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
State
单一状态树
vuex的基本数据,用来存储变量
Vue.use(Vuex);
export default new Vuex.Store({
state: {
// 存储共享数据 映射到 computed ...mapState(["属性名"])
// 数据类型可以是 数值、字符串等基本类型,也可以是{}、[]、[{},{}]
// 不推荐直接操作,而应该使用 actions
user: {
id: 1,
name: "张三"
}
},
Getter
从基本数据(state)派生的数据,相当于state的计算属性
getters: {
// 主要用对共享数据进行显示调整 1/2=>男/女
// 映射到 computed ...mapGetters(["属性名"])
info(state) {
return `编号:${state.user.id} 姓名:${state.user.name}`;
}
},
Mutation
提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
mutations: {
// 直接操作 state 里的数据
// 映射到 methods ...mapMutations(["方法名"])
// 不推荐直接操作,而应该使用 actions
setUser(state, name) {
state.user.name = name;
}
},
Action
和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
actions: {
// 间接操作 state 里的数据,通过调用 mutations 里的函数
// 映射到 methods ...mapActions(["方法名"])
setUser(context, name) {
context.commit("setUser", name)
}
},
Module
模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},
看一下案例效果