vue-cli 项目使用vuex，以及state数据在页面刷新后数据消失解决

「爱情、让人受尽委屈。」 2021-08-13 11:53 428阅读 0赞

因为要做一个个人作品。也重新捡捡vuex  
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。  
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

## 安装vuex ##

`yarn add vuex`

## 使用 ##

1.  在项目 `src` 目录下新建 `store` 文件夹，并在其中新建 `index.js`文件。

// 官方结构目录
    ├── index.html
    ├── main.js
    ├── api
    │   └── ... # 抽取出API请求
    ├── components
    │   ├── App.vue
    │   └── ...
    └── store
        ├── index.js          # 我们组装模块并导出 store 的地方
        ├── actions.js        # 根级别的 action
        ├── mutations.js      # 根级别的 mutation
        └── modules
            ├── cart.js       # 购物车模块
            └── products.js   # 产品模块

1.  `store` 文件夹中新建 `modules/bing.js` 文件，`modules` 是存放 `vuex` 模块的。
    
        // bing.js
        
        const state = {
            imgList: [1,2,3,4,5,6,7,8,9,10],
        	img: '123'
        }
        
        const getters = {
            imgList: state => state.imgList
        }
        
        const actions = {
            imgList(context){
                window.console.log(arguments)  // 打印一下看看它都有哪些参数 见下图
                // 通过输出可以发现他有两个参数
        		// 第一个是包含 commit dispatch getters state ...等 (此处的 state getters均为当前模块的state getters)
        		// 第二个则是 imgList
        		//  官网说明如下
        		// Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
        		// 因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
        		context.commit('imgList', value)
            },
        	img(context){
        		//...
        	}
        }
        
        const mutations = {
            imgList(state, value) { // state 是当前模块的state value 是在调用时接收的参数
                state.imgList = value;
            }
        }
        
        export default {
            namespaced: true,  // 启用模块命名空间， 防止命名冲突。
            state,
            getters,
            actions,
            mutations
        }
    
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BLTSQ0ok-1576060340286)(vuex\_files/1.jpg)\]  
    **actions**

*  `Action` 函数接受一个与 `store` 实例具有相同方法和属性的 `context` 对象，因此你可以调用 `context.commit` 提交一个 `mutation`，  
    或者通过 `context.state` 和 `context.getters` 来获取 `state` 和 `getters`。
 *  `Action` 不受约束！我们可以在 `action` 内部执行异步操作。
 *  `Action` 通过 `store.dispatch` 方法触发：
    
        this.$store.dispatch('imgList')  // 如此便可以调用 bing 模块 actions 中的 imgList 函数。

**mutations**

*  `Mutation` 必须是同步函数
 *  我自己的理解就是： mutation 就是一个事件注册的地方。在mutation改变数据。通过store.commit()调用提交。  
    达到修改store（vuex）内部的数据。

1.  写入：
    
        import Vue from 'vue'
        import Vuex from 'vuex'
        import Bing from './modules/bing'
        
        Vue.use(Vuex);
        const state = {}
        const actions = {}
        const mutations = {}
        
        export default new Vuex.Store({
            modules: {
        		// 模块都放到这里
                Bing
            },
            actions,
            state,
            mutations,
        })
2.  在项目 `main.js` 中导入 `store/index`

import Vue from 'vue'
    import App from './App.vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import router from './router/index'
    import Axios from 'axios'
    import store from './store/index'
    
    
    Vue.config.productionTip = false
    Vue.prototype.$axios = Axios
    
    Vue.use(ElementUI)
    
    new Vue({
      router,
      // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
      store,
      render: h => h(App),
    }).$mount('#app')

1.  现在就可以在别的地方使用了，例如在 `App.vue` 中使用

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

1.  产生原因  
    其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。
2.  解决思路  
    一种是state里的数据全部是通过请求来触发action或mutation来改变

一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中

很显然，第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。

// App.vue
    created(){ 
    	//在页面加载时读取sessionStorage里的状态信息
    	let sessionStorage = window.sessionStorage;  
    	if (sessionStorage.getItem("store") ) { 
    		this.$store.replaceState(Object.assign({ }, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    	}
    
    	//在页面刷新时将vuex里的信息保存到sessionStorage里
    	window.addEventListener("beforeunload",()=>{ 
    		sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    	})
    }

参考：https://www.cnblogs.com/donve/p/10559202.html