1.认识vuex
vuex是一个专门为vue.js应用程序开发的状态管理模式。采用集中式存贮管理应用的所有组件的状态,并以响应的规则保证状态以一种可预测的方式发生变化。
2、vuex的属性
vuex有五大核心属性: state, getter, mutation, action, module
3、state
存储数据,存储状态,在根实例中注册了store后,用this.$store.state来访问;
对应vue里面的data,存放数据方式为响应式,vue组件从store中读取数据,如数据发生变化,组件也会对应的更新.
4、getter
可以认为是storer的计算属性,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖发生了改变才会被重新计算
5、mutation
更改vuex的store中的状态的唯一方法是提交mutation.
6、action
包含任意异步操作,通过提交mutation间接变更状态
7、module
将store分割成模块,每个模块都具有state,getter,mutation,action,甚至是嵌套子模块
8、对于vuex的数据传递流程,如下图所示
当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法,actions里面的每个方法中都会有一个commit方法
当方法执行的时候会通过commit来触发mutations里面的方法进行数据修改.mutations里面的每个函数都有一个state参数,这样 就可以在mutations里面进行state的数据修改,当数据修改完毕后,会传导给页面,页面的数据也会发生改变
9、使用Vuex管理数据的好处
1、能够在vuex中集中管理共享的数据,易于开发和后期维护;
2、能够高效地实现组件之间的数据共享,提高开发效率;
3、存储在vuex的数据都是响应式的,能够实时保持数据与页面的同步;
10、vuex持久化
持久化安装命令 npm install vuex-persistedstate --save
plugins: [createPer({
//可以控制本地存储还是会话存储
storage: window.sessionStorage,
//可以进行重新命名
key: "myname"
})],