你知道什么是Vuex吗?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
vuex能做什么呢?
存储组件公共数据
3.vuex的核心
-
state 存储数据
-
mutations 存储方法 用来直接操作state中的数据
-
actions 存储方法 调用mutations中的方法 里面的方法返回的是promise对象可以实现异步操作
-
getters 对state中的数据做逻辑计算 类似于computed
-
modules 模块存储
-
plugins 插件(持久化存储)
4.vuex的运行原理
在组件中通过dispatch来调用actions中的方法,早actions中通过commit来调用mutations中的方 法,在mutaions中的方法中可以直接操作state中的数据,只要state中的数据发生改变,就会立即 响应到所有的组件上
5.
vuex的使用
-
基本使用 在vue的原型上有一个$store对象可以调用vuex的任何东西
state this.$store.state.** mutations this.$store.commit("方法名",参数) 参数只能传一个 actions this.$store.dispatch("方法名",参数) getters this.$store.getters.** module this.$store.模块名.state
-
使用映射函数
将vuex的中的成员映射到组件中然后使用
mapState mapMutations mapGetters mapActions
步骤:
-
在组件中导入需要的函数
import {mapState,mapGetters **} from "vuex"
-
映射函数在组件中对应位置
-
mapState --computed
-
mapGetters --computed
-
mapMutations--methods
-
mapActions--methods
-
-
语法
computed:{ ...mapState(['student']) }
-
6.vuex的持久化
就是将vuex的数据存储在本地(localStorage sessionStorage)
持久化网址:https://www.jianshu.com/p/a4faae6a3184
可以选择手动的去写,但是比较麻烦所以选择 插件
下载:
cnpm install vuex-persistedstate --save
配置:store->index.js
import persistedState from 'vuex-persistedstate'
默认的使用localStorage
plugins: [persistedState()]
还可以配置成sessionStorage
plugins: [persistedState({storage: window.sessionStorage})]
使用Vuex管理数据的好处:
1、能够在vuex中集中管理共享的数据,易于开发和后期维护;
2、能够高效地实现组件之间的数据共享,提高开发效率;
3、存储在vuex的数据都是响应式的,能够实时保持数据与页面的同步;