Vuex小结

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 = falsenew 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 修饰的异步函数中使用awaitawait this.$store.dispatch('setMsg', 'xxxxx')

3、Vuex中的辅助函数

mapState

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

// 在单独构建的版本中辅助函数为 Vuex.mapStateimport { 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)

robinvdvleuten/vuex-persistedstate: 💾 Persist and rehydrate your Vuex state between page reloads. (github.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>

原文转载：http://www.shaoqun.com/a/493356.html

amazon go：https://www.ikjzd.com/w/67

孙琦：https://www.ikjzd.com/w/1638

上海跨境通：https://www.ikjzd.com/w/1329

Vuex小结前言​ 近期的项目中多次用到了Vuex，感觉对Vuex不太熟悉，趁着周末学习了一波，现在来总结一下。1、Vuex是什么官网Vuex是什么？|Vuex(vuejs.org)的描述Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解vuex就是一个用来共享数据的，在Vuex里存的数据所
外贸圈：外贸圈
agora：agora
珠穆朗玛峰在哪个省 ：珠穆朗玛峰在哪个省
口述：异地恋 一到晚上男友就玩失踪情感异地恋情侣：口述：异地恋 一到晚上男友就玩失踪情感异地恋情侣
武汉 景德镇 瑶里 三清山 上海自驾攻略 - ：武汉 景德镇 瑶里 三清山 上海自驾攻略 -