一、Vuex的概念
vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,它相当于一个公共仓库,保存着所有组件都能共用的数据,那么vuex就很好的解决了我们这种问题,。
二、五大核心
state – 存放状态
getters – state的计算属性
mutations – 更改状态的逻辑,同步操作
actions – 异步操作
module – 将store模块化
三、使用
通过是在根目录下新建一个store文件夹,里面创建一个index.js文件,最后在main.js中引入,并挂载到实例上,之后那个组件中需要用到vuex就调用就行
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑,同步操作
},
actions: {
// 提交mutation,异步操作
},
// 如果将store分成一个个的模块的话,则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
modules: {
a: moduleA,
b: moduleB,
// ...
}
四、数据持久
vuex里面存放的数据,页面一经刷新会丢失。
解决办法:
存放在localStorage或者sessionStorage里面,进入页面时判断是否丢失,丢失再去localStorage或者sessionStorage里面取;
在vuex中可以通过安装vuex-persist 插件,进行持久化的配置就行
五、语法糖
辅助函数(4大金刚) mapState,mapActions,mapMutations,mapGetters
辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
如何使用:
Import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'