- A+
Vuex小结
前言
近期的项目中多次用到了Vuex，感觉对Vuex不太熟悉，趁着周末学习了一波，现在来总结一下。
1、Vuex是什么
官网Vuex 是什么？ | Vuex (vuejs.org)的描述
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解vuex就是一个用来共享数据的，在Vuex里存的数据所有的组件都可以访问到，而不必进行复杂的组件通讯。
vuex的核心就是state，getters，mutations，actions，modules这5个核心概念。
- state，Vuex中共享的数据
- getters，可以理解为Vuex中的计算属性
- mutations，用来修改state的，更改 Vuex 的 state中的状态的唯一方法是提交 mutation，只能是同步的操作
- actions，类似于mutation，可以进行异步的操作
- modules，Vuex中数据模块化
2、vuex如何使用
安装
# yarn $ yarn add vuex # or npm $ npm i vuex 在store/index.js中代码
import Vue from 'vue' import Vuex from 'vuex' import moduleA from './module/a' Vue.use(Vuex) export default new Vuex.Store({ state: { msg: 'goodnight everyone！！' }, mutations: { }, actions: { }, getters: { }, modules: { moduleA, } }) 在main.js中
import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ // 给Vue实例注入store，在组件中可以通过this.$store访问到Vuex的数据 store, render: h => h(App) }).$mount('#app') 最后在任意组件中，都可以通过this.$store来访问Vuex中的store
如：在App.vue中
<template> <div id="app"> {{ $store.state.msg }} </div> </template> <script> export default { name: 'App' } </script> 当我们想要修改state中的数据时，需要提交mutation来修改
mutations: { SET_MSG: (state, value) => { state.msg = value } }, // 在vue文件中 this.$store.commit('SET_MSG', 'xxxxx') 如果需要进行一些异步的操作，则mutation就不行了，需要在action中来提交mutation
actions: { setMsg: ({commit}, value) => { commit('SET_MSG', value) // 还可以返回commit的结果，这是一个promise对象 return commit('SET_MSG', value) // Promise } } // 在vue文件中 this.$store.dispatch('setMsg', 'xxxxx') // 如果action中return了mutation的commit，那么就可以进行.then 或者await操作 this.$store.dispatch('setMsg', 'xxxxx').then(() => { // ... }) // 或者在一个async 修饰的异步函数中使用await await this.$store.dispatch('setMsg', 'xxxxx') 3、Vuex中的辅助函数
mapState
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
// 在单独构建的版本中辅助函数为 Vuex.mapState import { mapState } from 'vuex' export default { // ... computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState (state) { return state.count + this.localCount } }) } 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组
computed: mapState([ // 映射 this.count 为 store.state.count 'count' ]) 利用展开运算符与局部计算属性混合使用
computed: { localComputed () { /* ... */ }, // 使用对象展开运算符将此对象混入到外部对象中 ...mapState({ // ... }) } mapGetters
和mapState使用方法一样
mapMutations和mapActions
和mapState用法类似，只不过是将mutations或actions映射成methods
methods: { ...mapActions([ // 映射 this.setMsg('xxx') 为 store.$dispatch('setMsg', 'xxx') 'setMsg' ]), ...mapMutations([ // 映射this.SET_MSG('xxx') 为store.commit('SET_MSG', 'xxx') 'SET_MSG' ]) } 4、Vuex页面刷新后数据丢失
原因：
store里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化
解决方法一:
利用sessionStorage或localStorage或者或cookie进行缓存，beforeunload事件可以在页面刷新前触发，监听beforeunload事件，在app.vue的生命周期中进行store中数据的存储和初始化，这里以存在sessionStorage中为例
export default { name: 'App', created () { // 在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem('vuex')) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('vuex')))) } // 在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener('beforeunload', () => { sessionStorage.setItem('vuex', JSON.stringify(this.$store.state)) }) } } 解决方法二：
利用第三方库，vuex-persistedstate进行Vuex数据的持久化。
安装
$ yarn add vuex-persistedstate 在vuex初始化时候，作为组件引入。
import persistedState from 'vuex-persistedstate' export default new Vuex.Store({ // ... plugins: [persistedState()] }) 默认是持久化所有的state，也可以自行配置
可以参考这两个链接：vuex持久化 vuex-persistedstate - 简书 (jianshu.com)
5、v-model如何与Vuex中的数据进行双向绑定
假设store/index.js中代码如下
import Vue from 'vue' import Vuex from 'vuex' import persistedState from 'vuex-persistedstate' export default new Vuex.Store({ state: { msg: 'hello vuex', userInfo: { username: '', password: '' } }, mutations: { SET_MSG: (state, value) => { state.msg = value }, SET_USER_INFO(state, value) => { state.userInfo = value } }, actions: { setUserInfo: ({commit}, value) { commit("SET_USER_INFO", value) } } plugins: [persistedState()] }) <script> import { mapState, mapActions, mapMutations } from 'vuex' export default { computed: { ...mapState(['userInfo']), // 和简单数据类型进行绑定，需要提供setter，在setter中（分发actions）提交mutation修改state msg: { get() { return this.$store.state.msg } set(value) { this.SET_MSG(value) } } }, // 和复杂数据类型进行绑定，需要深度监听，在handler中（分发actions—）提交mutation修改state watch: { userInfo: { handler(userInfo) { this.setUserInfo(userInfo) }, deep: true } }, methods: { ...mapActions(['setUserInfo']), ...mapMutations['SET_MSG'] } </script> 
