Vuex是什么?
Vuex是一个专门为vue.js应用设计的 (状态管理架构) , 统一管理和维护各个vue组件的可变化状态 (可以理解成vue组件李某些data).
Vue有五个核心概念,分别是"state,getters,mutations,actions,modules".文本将对这个五个狠心概念进行梳理.
总结:
state是基本数据类型
getters是从基本数据派发的数据
mutations是提交更改数据的方法,同步
actions他像是一个装饰器,包裹mutatuons,是之可以异步
modulse 模块化管理工具Vuex
state:
state即Vuex中的基本数据类型!
单一状态树
Vuex使用单一状态树,即用一个对象就包含了全部的状态数据.state作为构造器选项.定义了所有我们需要的基本状态参数
我们可以通过vue的computed获得Vuex的state,代码如下:
const store = new Vuex.Store({
state: {
count:0
}
})
const app = new Vue({
//..
store,
computed: {
count: function(){
return this.$store.state.count
}
},
//..
})
每当store.state.count变化的时候,都会重新取计算属性,并触发更新关联的DOM.
getters:
即从store的state中派发生出的状态.
getters接收state作为其第一个参数,接受其他getters作为第二个参数,如果不需要,第一个参数可以省略,代码如下
const store = new Vuex.Store({
state: {
count:0
},
getters: {
// 单个参数
countDouble: function(state){
return state.count * 2
},
// 两个参数
countDoubleAndDouble: function(state, getters) {
return getters.countDouble * 2
}
}
})
与state一样,我们也可以通过Vue的computed获取Vuex的getters.
const app = new Vue({
//..
store,
computed: {
count: function(){
return this.$store.state.count
},
countDouble: function(){
return this.$store.getters.countDouble
},
countDoubleAndDouble: function(){
return this.$store.getters.countDoubleAndDouble
}
},
//..
})
mutations
提交mutation是更改Vuex中的store中的状态的唯一方法.(mutation是改变的意思)
mutation必须是同步的,如果要异步需要的actions.
每个mutation都有一个字符串 事件尅性type和一个回调函数(handler).这个回调函数就是我们实际进行状态更改的地方法.并且他会接受state作为第一个参数,提交载荷作为第二个参数..提交荷载也可以省略的
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//无提交荷载
increment(state) {
state.count++
}
//提交荷载
incrementN(state, obj) {
state.count += obj.n
}
}
})
你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法
//无提交荷载
store.commit('increment')
//提交荷载
store.commit('incrementN', {
n: 100
})
对象风格的提交方式
我们也可以使用这样包含 type 属性的对象的提交方式。
store.commit({
type: 'incrementN',
n: 10
})
Mutations 需遵守 Vue 的响应规则
- 最好提前在你的 store 中初始化好所有所需属性。
- 当需要在对象上添加新属性时,你应该
- 使用
Vue.set(obj, 'newProp', 123)
, 或者 - 以新对象替换老对象。例如,利用对象展开运算符我们可以这样写
state.obj = {...state.obj, newProp: 123 }
- 使用
- 当需要在对象上添加新属性时,你应该
actions
Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
我们用下面的代码来结束actions:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
setInterval(function(){
context.commit('increment')
}, 1000)
}
}
})
Modules
使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。
为了解决以上问题,Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
模块的局部状态
对于模块内部的 mutation
和 getter
,接收的第一个参数是模块的局部状态,对于模块内部的 getter,根节点状态会作为第三个参数:
const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// state 模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
},
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum (context) {
if ((context.state.count + context.rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
map的高级用法
map:接收两个参数,一个是回调函数,另一个号回调函数的this值(可选),回调函数接收三个参数,分别是(当前值,当前索引,整个数组).
返回:函数返回一个新创建的数组,数组中每个元素都经过了回调函数的处理,结果不改变原数组
代码:
let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
return item + index + array[index] + this.val;
//对第一个元素,1 + 0 + 1 + 5 = 7
//对第二个元素,2 + 1 + 2 + 5 = 10
//对第三个元素,3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]
Vuex的持久化:
vuex存储了应用的很多数据,但是一但我们刷新页面,所有的数据都会丢失掉,只能重新从服务器啦数据,又要加很多的逻辑判断,我们可以把vuex和storage结合起来,来解决这个问题.
首先我们下载下面这个指令:
npm install vuex-persistedstate -S
在使用:
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()] //加上这个就可以了
})
这时候我们右击点检查,看Application里面
需要注意的是,退出登录后或者切换账号就要清除vuex里面的数据,敏感信息不要放在vuex里面,或者加密之后在存进去就ok了