TreeviewCopyright © levywang123@gmail.com 2020 all right reserved, powered by aleen42

状态管理vuex简介

vuex 是专为 vue.js 应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
vuex 也集成到 vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理核心

状态管理有 5 个核心,分别是 state、getter、mutation、action 以及 module。分别简单的介绍一下它们:

1、state

state 为单一状态树,在 state 中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在 vue.js 的组件中才能获取你定义的这个对象的状态。

2、getter

getter 有点类似 vue.js 的计算属性,当我们需要从 store 的 state 中派生出一些状态,那么我们就需要使用 getter,getter 会接收 state 作为第一个参数,
而且 getter 的返回值会根据它的依赖被缓存起来,只有 getter 中的依赖值(state 中的某个需要派生状态的值)发生改变的时候才会被重新计算。

3、mutation

更改 store 中 state 状态的唯一方法就是提交 mutation,就很类似事件。每个 mutation 都有一个字符串类型的事件类型和一个回调函数,我们需要改变 state 的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。

4、action

action 可以提交 mutation,在 action 中可以执行 store.commit,而且 action 中可以有任何的异步操作。在页面中如果我们要调用这个 action,则需要执行 store.dispatch

5、module

module 其实只是解决了当 state 中当代码量很大很复杂、臃肿的时候,module 可以将 store 分割成各个模块,每个模块中拥有自己的 state、mutation、action 和 getter。

vuex 页面刷新数据丢失的解决办法

在 vue 项目中用 vuex 来做全局的状态管理, 发现当刷新网页后,保存在 vuex 实例 store 里的数据会丢失。参考链接

原因:

因为 store 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,store 里面的数据就会被重新赋值初始化

解决思路:

将 state 的数据保存在 localstorage、sessionstorage 或 cookie 中(三者的区别),这样即可保证页面刷新数据不丢失且易于读取。

  • 1.localStorage: localStorage 的生命周期是永久的,关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据,否则数据永远不会消失。

  • 2.sessionStorage:sessionStorage 的生命周期是在仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的。

  • 3.cookie:cookie 生命期为只在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为 4K 左右,有个数限制(各浏览器不同),一般不能超过 20 个。缺点是不能储存大数据且不易读取。

由于 vue 是单页面应用,操作都是在一个页面跳转路由,因此 sessionStorage 较为合适,原因如下:

  • 1.sessionStorage 可以保证打开页面时 sessionStorage 的数据为空;

  • 2.每次打开页面 localStorage 存储着上一次打开页面的数据,因此需要清空之前的数据。

vuex 中 state 数据的修改必须通过 mutation 方法进行修改,因此 mutation 修改 state 的同时需要修改 sessionstorage,问题倒是可以解决但是感觉很麻烦,state 中有很多数据,很多 mutation 修改 state 就要很多次 sessionstorage 进行修改,既然如此直接用 sessionstorage 解决不就行了,为何还要用 vuex 多此一举呢? vuex 的数据在每次页面刷新时丢失,是否可以在页面刷新前再将数据存储到 sessionstorage 中呢,是可以的,beforeunload 事件可以在页面刷新前触发,但是在每个页面中监听 beforeunload 事件感觉也不太合适,那么最好的监听该事件的地方就在 app.vue 中。

  • 在 app.vue 的 created 方法中读取 sessionstorage 中的数据存储在 store 中,此时用 vuex.store 的 replaceState 方法,替换 store 的根状态

  • 在 beforeunload 方法中将 store.state 存储到 sessionstorage 中。

代码如下:

export default {
    name: 'App',
    created() {
        //在页面加载时读取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))
        })
    },
}
Copyright © levywang123@gmail.com 2020 all right reserved,powered by Gitbook该文章修订时间: 2020-08-17 15:30:00

results matching ""

    No results matching ""