Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
核心概念
vuex由五部分组成:State、Mutations、Actions、Getter、Module
vuex 四大辅助函数 mapState 、mapGetters 、 mapMutations 、mapActions
- state: 储存初始化数据
- mutations:唯一可以修改state里的数据的场所
- actions:可以包含异步操作,可以调用mutations的方法操作state里的数据
- getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)
- modules:模块化管理store(仓库),每个模块拥有自己的 state、mutation、action、getter
运行机制
- .客户端操作事件,dispath()方法触发actions,叫action改数据,但是action没有权限改,只能向上级(mutations)汇报,通过commit()提交。并且actions里面的行为和mutamutions的行为要一至。
- actions提交过来,通过commit()触发mutamutions,然后更新状态。
- 数据的单独处理getters:例如state里面有价格的处理,过滤器过滤后变成单独的功能放到getters里面封装成一个get方法,然后组件上$state.getters直接调用。
- state更改后对应的view视图在render的作用下重新渲染
如何使用
方法1、直接调用
// 直接调用state里的数据
this.$store.state.name
// 调用mutations里的方法,并传递数据 参数一:mutations定义好的方法名,参数二:要传递的数据
this.$store.commit('addUser',obj)
方法2、映射----> 辅助函数
映射过来的数据可以直接使用。
// 1、在组件内引入vuex
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
// 2、解析
// mapActions,mapMutations,要在methods方法里解析
methods: {
// 以对象的形式解析
...mapActions({
setToken: 'setToken'
}),
// 以数组的形式解析
...mapMutations(['setToken']),
},
// mapGetters , mapState 要在 computed计算属性里解析
computed: {
...mapState(['userid']),
...mapGetters(['TotalPrice']),
},
数据持久化
问题:存储在vuex中的状态,刷新页面,会丢失。
为了解决刷新页面数据丢失,才有了数据持久化。
安装插件:
最简单的做法就是利用插件 vuex-persistedState
。
cnpm install vuex-persistedState -S
-S
是--save
的简写,意为:把插件安装到dependencies(生产环境依赖)中
-D
是--save-dev
的简写,意为:把插件安装到devDependencies(开发环境依赖)中
使用:
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
})