vuex 是一个专为 vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.
当我们接触 vuex 的时候,这是我们最先看到的一句官方引导.
从这句话中,我们可以得到如下几个信息:
1,vuex 是一个为 vue 而存在的特化的 Flux,如同数据库中的弱实体一样, 离开了 vue,vuex 就用不了.反之可以看到 redux 就不存在,无论是 vue 还是 react,redux 都可以使用.所以这里体现的 vuex 的 "特性",redux 则具备 "普适性"
2,集中式的管理说明 vue 中所有的组件的状态都是存在于 vuex 中
3,使用 vuex 你就要遵循我的规则,这样组件中状态的变化我才能跟踪的到.
1. 项目中 vuex 目录的搭建
上图是我在 这篇文章 中,vue 整体项目骨架的局部.
vuex 使用的是单一的状态树,我们的 vue 应用将仅仅包含一个 store 的实例.所以当我们将 store 挂载到 vue 的实例上以后,我们可以通过 this.$store 取到 vuex 里面的各个部分.
2.index.js
import vue from 'vue'
import vuex from 'vuex'
import mutations from './mutation'
import getters from './getter'
vue.use(vuex)
const state = {
isLoading:false
}
export default new vuex.Store({
state,
getters,
mutations
})
在 index 这个文件中,我们会去定义我们需要在 vuex 中存储的状态初始值.
比如说,我在上面的 state 对象中去存储了一个 isLoading 属性,该属性我准备用它来标识我请求 backend API 的时候显示,在请求完成后消失的这样一个 loading 的效果,来缓解一下用户的等待心理.
3.Mutation(mutation.js)
一般来说,我们在项目中最常用的就是 mutation.js 里面的方法了.因为更改 vuex 中的 store 里的 state 的唯一的方式就是提交 mutation.
在 vuex 中,每个 mutation 都有一个字符串的事件类型 (mutation-type) 和一个回调函数(handler).
这个回调函数可接受两个参数,第一个参数为 state,第二参数是 mutation 的载荷 (payload).
//...
mutations: {
/**
* @method:只传入state,修改loading状态
* @param {bool} isLoading:loading状态
*/
changeLoading(state) {
state.isLoading = !state.isLoading
}
}
store.commit('changeLoading')
mutations: {
/**
* @method:传入state和payload,修改loading状态
* @param {bool} isLoading:loading状态
*/
changeLoading(state,payload) {
state.isLoading = payload.isLoading
}
}
store.commit('changeLoading',{isLoading: true})
还有一种提交 mutation 的方式是直接使用包含 type 属性的对象,不过我不是很推荐这样的方式,因为用上面的方式来处理的话,代码的易读性会更高.
store.commit({
type: 'changeLoading',
isLoading: true
})
4.mutation-types.js
在需要多人协作的项目中,我们可以使用常量代替 mutation 事件类型.这在各种 Flux 实现中是很常见的模式.同时把这些常量放在单独的文件中可以让协作开发变得清晰.
// mutation-types.js
export const CHANGE_LOADING= 'CHANGE_LOADING'
// mutation.js
import { CHANGE_LOADING} from './mutation-types'
export default{
[CHANGE_LOADING](state,payload){
state.isLoading = payload.isLoading
},
}
对于定义 mutation-type 里面的事件类型,我大致遵循我自己定义的如下规范:
1,因为 mutation 类似于事件,所以以动词开头
2,单词间以下划线进行连接
3,保存到 vuex 里面的状态用 RECORD 标识
4,缓存到本地的状态用 SAVE 标识
当然,这个规范的话大家可以自己定义,只要能通过 mutation-type 就能知道 mutation 的意图就是极好的.
5.Getter(getter.js)
有时候我们需要从 store 中的 state 中派生出一些状态,例如我上面提到的需要在异步请求的时候去显示一个带有遮罩层的 loading,然后我 loading 的下面需要根据 state 去展示 loading 的状态.在不使用 getter 的情况下,我们会选择使用计算属性去处理.
computed: {
loadingTxt () {
return this.$store.state.isLoading ? '加载中' : '已完成';
}
}
但是,我们这个 loading 需要在很多的组件中去使用它.那么,我们要么复制这个函数,要么抽取到一个共享函数然后在多处导入它--无论哪种方式都不是很理想.
如果使用 Getter,那么一切都变得美好了.
//getter.js
export default {
loadingTxt:(state) =>{
return state.isLoading ? '加载中' : '已完成';
}
};
就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算.
并且,Getter 也可以接受其他 getter 作为第二个参数:
export default {
loadingTxt:(state) =>{
return state.isLoading ? '加载中' : '已完成';
},
isLoading:(state,getters) => {
return 'string' === typeof getters.loadingTxt ? true : false;
}
};
通过 mapGetters 辅助函数可以将 store 中的 getter 映射到局部计算属性
//组件中
import { mapGetters } from 'vuex'
export default {
data(){
return {
//...
}
},
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'loadingTxt',
'isLoading',
// ...
])
}
}
6.Action(action.js)
action 的功能和 mutation 是类似的,都是去变更 store 里的 state,不过 action 和 mutation 有两点不同:
1,action 主要处理的是异步的操作,mutation 必须同步执行,而 action 就不受这样的限制,也就是说 action 中我们既可以处理同步,也可以处理异步的操作
2,action 改变状态,最后是通过提交 mutation
就拿购物车来说,当我们去添加一个商品的时候,我们需要先和后台去通讯一次,这里涉及到 sku 或者说是如果用户只添加了但是没有去下单.
如果后台添加成功,前端再去展示新添加的商品,如果失败,我们需要告诉用户添加失败了.
st actions = {
checkout ({
state,
commit,
//rootState
}, products) {
const savedCartItems = [...state.added]
commit(SET_CHECKOUT_STATUS, null)
// 置空购物车
commit(SET_CART_ITEMS, { items: [] })
shop.buyProducts(
products,
//成功
() => commit(SET_CHECKOUT_STATUS, 'successful'),
//失败
() => {
commit(SET_CHECKOUT_STATUS, 'failed')
commit(SET_CART_ITEMS, { items: savedCartItems })
}
)
}
}
7.module
当我们的项目足够大的时候,单一的状态树这个时候就会显得很臃肿了.因为需要用 vuex 进行状态管理的状态全部集中在一个 state 对象里面.
所以,当一个东西大了以后,我们就要想办法进行分割,同样的道理,我们熟知的分冶法和分布式其实也是基于这样的一个思想在里面.而 vuex 提供了 module,我们就可以去横向的分割我们的 store.
比如说,我在项目中需要去做一个购物车这样的东西,这在电商的项目中也是常见的需求.
//shopCart.js
import shop from '../../api/shop'
import {
ADD_TO_CART,
SET_CART_ITEMS,
SET_CHECKOUT_STATUS
} from '../mutation-types'
const state = {
added: [],
checkoutStatus: null
}
/**
* module getters
* @param {Object} state:模块局部state
* @param {Object} getters:模块局部getters,会暴露到全局
* @param {Object} rootState:全局(根)state
*/
const getters = {
checkoutStatus: state => state.checkoutStatus,
cartProducts: (state, getters, rootState) => {
return state.added.map(({ id, quantity }) => {
const product = rootState.products.all.find(product => product.id === id)
return {
title: product.title,
price: product.price,
quantity
}
})
},
cartTotalPrice: (state, getters) => {
return getters.cartProducts.reduce((total, product) => {
return total + product.price * product.quantity
}, 0)
}
}
/**
* module actions
* @param {Object} state:模块局部state
* @param {Object} getters:模块局部getters,会暴露到全局
* @param {Object} rootState:全局(根)state
*/
const actions = {
checkout ({
state,
commit,
//rootState
}, products) {
const savedCartItems = [...state.added]
commit(SET_CHECKOUT_STATUS, null)
// 置空购物车
commit(SET_CART_ITEMS, { items: [] })
shop.buyProducts(
products,
//成功
() => commit(SET_CHECKOUT_STATUS, 'successful'),
//失败
() => {
commit(SET_CHECKOUT_STATUS, 'failed')
commit(SET_CART_ITEMS, { items: savedCartItems })
}
)
}
}
/**
* module mutations
* @param {Object} state:模块局部state
* @param payload:mutation的载荷
*/
const mutations = {
//用id去查找商品是否已存在,
[ADD_TO_CART] (state, { id }) {
state.checkoutStatus = null
const record = state.added.find(product => product.id === id)
if (!record) {
state.added.push({
id,
quantity: 1
})
} else {
record.quantity++
}
},
[SET_CART_ITEMS] (state, { items }) {
state.added = items
},
[SET_CHECKOUT_STATUS] (state, status) {
state.checkoutStatus = status
}
}
export default {
state,
getters,
actions,
mutations
}
View Code
在 module 的定义的局部 state,getters,mutation,action 中,后三个都会暴露到全局的 store 中去,这样使得多个模块能够对同一 mutation 或 action 作出响应.就不需要在其他的模块中去定义相同的 mutation 或 action 了.
而这里的 state 是局部的.这也导致后来的持久化无法去处理用 module 分割后的 state.
如同上面的 module =》shopCart,
当我们无论是在 index.js 里面或者其他的 module 中,shopCart 里面的 getters 或者 action 或者 mutations,我们都可以去使用.
//test.js
const state = {
isTest:false
};
const getters = {
isTest :state => state.isTest,
checkTestStatus:(state,getters) => {
return getters.checkoutStatus;
}
};
export default {
state,
getters,
}
//组件中
...mapGetters([
'checkTestStatus'
])
//...
created(){
this.checkTestStatus ;//null
}
如果说,我就想让我的 module 里面的定义的全部都是独享的.我们可以使用 module 的命名空间,通过设置 namespaced: true.
//test.js
const getters = {
// 在这个模块的 getter 中,`getters` 被局部化了
// 你可以使用 getter 的第四个参数来调用 `rootGetters`
someGetter (state, getters, rootState, rootGetters) {
getters.someOtherGetter // 'test/someOtherGetter'
rootGetters.someOtherGetter // 'someOtherGetter'
},
someOtherGetter: state => { ... }
};
const actions = {
// 在这个模块中, dispatch 和 commit 也被局部化了
// 他们可以接受 `root` 属性以访问根 dispatch 或 commit
someAction ({ dispatch, commit, getters, rootGetters }) {
getters.someGetter // 'test/someGetter'
rootGetters.someGetter // 'someGetter'
dispatch('someOtherAction') // 'test/someOtherAction'
dispatch('someOtherAction', null, { root: true }) // 'someOtherAction'
commit('someMutation') // 'test/someMutation'
commit('someMutation', null, { root: true }) // 'someMutation'
},
someOtherAction ({ state,commit }, payload) { ... }
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
8. 持久化 state 的工具: vuex-persistedstate
用过 vuex 的肯定会有这样一个痛点,就是刷新以后 vuex 里面存储的 state 就会被浏览器释放掉,因为我们的 state 都是存储在内存中的.
而像登录状态这样的东西,你不可能一刷新就让用户重新去登录吧!所以,我们会去选择把状态存储到本地.
这样一来问题貌似是解决了,但是当我们需要使用的时候,我们就需要不断的从本地,通过 getStore 这样的方法去取得我们 state.如果需要更新的话,我们又要在 mutation 里面通过 setStore 这样的方法去处理它.
虽然,我们的 setStore 都是在操作了 state 以后再去调用的,也就是说无论是通过 vuex 的 logger 或者 vue 的 dev tool 我们都是可以对 local 里面的状态进行跟踪的,但是,我们无法保证我们每次都记着去写 setStore.
这样一来,在共享 state 的组件中,我们的代码可能就会是这样的.
import { getStore } from '@/util'
//组件中
mounted(){
this.foo = getStore('foo');
this.bar = getStore('bar');
//....
}
那么,如何去改进呢?
我们能想到的就是,能不能让 state 不是保存在内存中,而是存储在本地.
而 vuex-persistedstate 做了这样的事情,它帮我们将 store 里面的 state 映射到了本地环境中.这样一来,我通过提交 mutation 改变的 state,会动态的去更新 local 里面对应的值.
大家感兴趣的话,可以戳这里, 这里有个小 dmeo
来源: https://www.cnblogs.com/ChengWuyi/p/8277136.html