vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,下面这篇文章主要给大家介绍了关于vuex页面刷新数据丢失问题的四种解决方式,需要的朋友可以参考下

我们知道在VUEX中获取state数据可以通过this.$store.state.变量名进行获取，那么按常理来说，要想修改这个变量我们重新给他赋个值就行了，下面的代码证明不通过mutation，而直接修改state修改确实生效了

Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，每一个Vuex应用的核心是store（仓库）

我相信每一个程序员都会使用vuex吧,首先我承认vuex真的超好用,尤其是在项目特别大的时候,代码会看起来非常的简洁,也方便维护,但是项目大了,vuex的公共数据的嵌套也会越来越深

概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间的通信

众所周知，Vuex 是 Flux 架构的一种实现。Flux 清晰确立了数据管理场景下各种职能单位，其主要准则有：Vuex 也是紧紧围绕这些准则开发的，通过 store 类提供 Flux 模式的核心功能。在满足架构的基本要求之外，则进一步设计了许多便利的措施：

store.js 文件 ，这是我们初始化数据的 ，也是之后我们存数据的地方，这里我先初始化一个 review 空的对象 ！mutation-types.js 这里是我们存常量的 ，方便我们之后在 mutations 里面调用 !

Vuex是什么呢？它是Vue的状态管理模式，在使用vue的时候，需要在vue中各个组件之间传递值是很痛苦的，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被改变

首先说说什么叫前端状态。所有程序都有“状态”，状态表现在代码中的各种类型的变量，在程序运行的过程中发生改变的过程，而我们编写的程序就是在控制这些“状态”如何发生改变。

Vuex 是一把双刃剑。如果使用得当，使用 Vue 可以使你的工作更加轻松。如果不小心，它也会使你的代码混乱不堪。对 Vuex 中的映射是如何工作的以及为什么要使用它有了深刻的了解

在nuxt中使用Vuex，以模块方式引用——计数器为例,用computed监听Vuex中state的变化, 及时渲染到界面上。如果在data中接收Vuex的state

计算属性比method好的一点是计算属性依赖数据是否变化而执行，不是每一次都执行，效率比较高，为了复用代码可以给计算属性进行传参

本则路由考虑验证进入登录页面，完成登录操作进入首页。使用enter键切换频道

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension

一般我们在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例