vuex页面刷新数据丢失问题的多种解决方法

刷新页面vuex的数据会丢失属于正常现象，因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

将接口返回的数据保存在vuex的store里，也将这些信息也保存在sessionStorage里。注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。

在store文件夹里面的js文件 示例如下

其实这里还可以用 localStorage，但是它没有期限；所以常用的还是sessionStorage，当浏览器关闭时会话结束。

（1）安装 vuex-along

（2）在store文件夹里的indexjs中引入vuex-along并配置相关代码

（1）安装 vuex-persistedstate

（2）在store文件夹里的indexjs中引入vuex-persistedstate并配置相关代码

（1）安装 vuex-persist

（2）在store文件夹里的indexjs中引入vuex-persist并配置相关代码

1vuex的优缺点

2vuex的使用

先上目录结构：

​

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（ *** 作数据的指令）

处理数据， *** 作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this$storecommit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些 *** 作在mutations中处理

这里的参数 context 是对象{commit, state},后一个参数是你需要传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用vuex的数据太多了，然而把所有的数据处理全部放在 mutationsjs文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1js

mod2js也是如此

那么如何调用呢？

更新数据的方法会有所变化吗？依然按照原来的方法使用就行了

总结：

将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3vuex的注意点

a在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b使用vuex我们在组件内更改数据是无效的。例如：this$storestatename=‘小明‘，这么做会报错。

Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。

上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏

而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据

多个组件共享数据或者是跨组件传递数据时

然后在组件中就可以通过this$store访问到vuex了

state作为唯一的数据源，所有的共享数据都存放在state中，如：

vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutations修改，其实在组件中是可以直接修改的，但是这样通过mutations修改的方式，可以更加集中的监控所有数据的变化。

在mutations中定义一些修改state数据的方法，方法第一个参数就是state对象

（1）触发mutation的方法

这次是在组件的methods中，将mutation映射成methods的方法

（2）mutation传值（官网将传递的值称为载荷）

对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据

还可以写成一种对象的方式

mapMutations传值

（3）注意

actions和mutations类似，不同的是，actions是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；actions中可以执行异步 *** 作。actions中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行actions方法的方式就是：this$storedispatch('方法名')

比如定义一个定时器异步的使count自增

而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了

组件中访问getters中的属性

其实和state差不多，就不多说了

下一节：vuex模块化

vue＋vuex＋axios从webpack－server获取模拟数据存入vuex并取回展示到页面

时间：2017-03-23 20:09:04

                        阅读：426

                        评论：0

                        收藏：0

                        [点我收藏+]

             

标签：errno   文件中   div   第一个   渲染   getter   fun   pes   vue

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话，有必要考虑引入vuex来管理这些凌乱的状态，今天这边博文用来记录这一整个的过程，后台api接口是使用webpack－server模拟的接口，这个前面的文章中有提到，需要的可以去翻阅。

整个的流程是在组件的created中提交dispatch，然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数据并渲染在页面上

首先新需要在项目中安装vuex：

运行命令　npm　install　vuex　－－save－dev

在项目的入口js文件main．js中

import store from ‘/store/index‘

并将store挂载到vue上

new Vue({

el: ‘#app‘,

router,

store,

template: ‘<App/>‘,

render: (createElement) => createElement(App)

})

然后看下整个store的目录结构，modules文件夹用来将不同功能也面的状态分成模块，index．js文件夹是store的入口文件，types文件夹是定义常量mutation的文件夹

整个vuex的目录结构如下：

这里我新建了文件夹fetch用来编写所有的axios处理和axios封装

以上就是关于vuex页面刷新数据丢失问题的多种解决方法全部的内容，包括:vuex页面刷新数据丢失问题的多种解决方法、浅谈vue项目进阶开发-vuex篇、vuex基础总结等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！