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

因为要做一个个人作品。也重新捡捡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.statecontext.getters 来获取 stategetters
  • 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 中使用
<script>
import Heade from './components/header.vue';

export default {
	name: 'app',
	components: {
		Heade,
	},
	created(){
		this.$axios.get('wwww.baidu.com',{
			params:{
				title: ''
			}
		}).then((res) => {

			this.$store.dispatch('Bing/imgList', ['这', '是', '传', '给', 'imgList', '的', '值'])
			// 这里会掉用vuex bing模块actions中imgList函数。
		}).catch( (error) => {
			window.console.log(error);
		});
	},
	methods: {
		get(){
			// 这样就能拿到imgList的数据了
			return return this.$store.state.Bing.imgList
		}
	}
};
</script>

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

发布了40 篇原创文章 · 获赞 13 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览