locastorage 更够替代vuex吗

Question

在项目中好像所有使用vux的需求都能用locastorage解决。
1：登录信息的保存
2：组件的数据的共享，需要改变的就A组件set一下状态，跳到B组件自然获取的是新的状态。
什么时候必须用到vuex？？？

Answer 1

locastorage？愣了一下，还以为是新库。
用localStorage替代vuex，从功能上看，可行。
没学会用vuex之前，我是用sessionStorage替代vuex。
当然，弊端很明显，sessionStorage只能对数据进行简单的读写，在不同组件之间读写数据并做数据转化时，都需要对每个读写操作都写上一遍相同的代码。
为了省下这重复的工作量，我把读写数据的处理写成一个全局函数，这样使用方式简单，功能也能实现。
但是随着需求的变动，需要交互的数据越来越多，全写成全局函数，显然不适合了，需要一个单独的模块这来管理这些数据读写操作。
想想，还是花点时间学学vuex吧

Answer 2

vuex是状态管理，重点是管理，不是存放。localStorage只有读写数据的功能，没有管理的功能，如果单读用的话你就需要自己写管理的功能。两者一起使用不冲突。

不要把两者弄混了，两者是完全不一样的东西。一个是状态管理的库，一个是浏览器提供给你的读写数据的API。

Answer 3

如果数据传到后台，不同的组件使用的话，都可以从后台拿到数据，只是网络请求开销比较大，父子组件通信的话，可以直接emit on 或者props,而多层嵌套组件通信就需要有vuex这样的解决方案，公共数据托管在state里，不同的组件都可以拿到这个数据

Answer 4

localStorage里面的内容改了你组件数据会改吗？ 这就是它的缺点。
虽然也可以用onstorage监听，但按照这个思路不断写下去，你会发现自己撸出了一个状态管理器来。
说到底，一个是数据容器，一个是数据管理器。

Answer 5

你localstorage存个function给我看看

Answer 6

一个是状态管理，一个是数据本地存储，互不冲突并且可以相辅，两个风马牛不相及的东西被你拿在一起相提并论我也是相当佩服你清奇的脑回路哈。

如果你使用vuex就是起到一个数据集中缓存的作用，有点杀鸡用牛刀了

如果你用keep-alive，多页面共活，一个数据对象会同时在多个页面N个组件中同时展示，并有增删改查需求，还要保持状态唯一，你就会体会到让vuex集中管理的好，如果你强说各组件各自实现增删改查逻辑，数据更新后推送消息到各组件中一一更新，当然可以，从来没有什么技术栈是不可替代的，大都只是为了让某些需求和功能更轻松规范的实现而已

Answer 7

不能。
1.响应式还得用vuex
2.localStorage用于本地持久化数据存储，二者功能不同。
3.更多的时候需要二者配合，而非用一个代替另一个。

Answer 8

功能不一样，看你的需求是什么。如果你只是把vuex当作一个存储的容器，那么是可以的。
但vuex更大的作用是管理，你要手写吗？

Answer 9

可以，毕竟没有vueX的时代我们也过来了。
vuex带来了更多的便利。比如vueX可以简单的实现数据监听，自己写又去重复造轮子

Answer 10

信息保存vuex+locastorage配合使用更佳，state取的时候从locastorage中取，action存的时候顺便往locastorage也存下，这样信息就保存了，即使页面跳转+刷新数据也是有的，而且也可以做到A页面中保存的信息变了，到B页面中数据也是跟着变的。

Answer 11

这是两个完全不同的概念啊···

首先 vuex 是给 vue 用的状态管理库（除了能管理数据 state，还能管理读写数据的操作 mutation ），而 localStorage 仅仅是个浏览器提供的api，在状态管理这方面，它只起到将数据持久化存储的作用，至于管理读写数据的操作，不存在的......

并且，vuex 中的数据是存储在内存中的，页面刷新就会丢失，而 localstorage 则是存储在计算机本地，刷新并不会丢失

=====================举个栗子让题主深入理解 vuex======================

如果你的整个项目是一个酒店，这间酒店能用做菜的 原材料（data）和 厨具（function）做出各种美味的 菜肴（经过处理的 data，注入到写好样式的页面中），各个.vue文件.js文件都看作是一个单独的酒店房间，都能堆放各种 data 和 function ，

那么 vuex 就是这间酒店的中心仓库，存储了整间酒店做所有各式菜肴都要用到的通用 原材料（state）以及 厨具（mutation）

=================举个栗子让题主深入理解 localStorage 在 vuex 中的运用============

比如你说的用户信息 userInfo ，在 vuex 中是放在整个单对象树的 state 属性里的，书写管理这个 userInfo 的 mutation 有两种方案：

方案一：

不使用 localStorage 。页面每次要用到 userInfo 都是直接通过发送请求从api服务器处获取

方案二：

使用 localStorage 。 先声明一个调用 api 拉取用户信息到本地并存入 localstorage 的 getUserInfoFromAPIsaveToLocalStorage() 方法，要用到 userInfo 的时候，则调用从本地 localstorage 读取用户信息的 getUserInfoFronLocalStorage() 方法

在 vuex 里，getUserInfoFromAPIsaveToLocalStorage() 和 getUserInfoFronLocalStorage() 这两个 function 是放在 mutation 属性里的

Answer 12

能提出这问题的，一般都是遇到刷新数据丢失的情况了，这种情况一般也只是登录信息，其它的不存在，这是单页面

Answer 13

数据并不是响应式的 有些功能无法替代的