vuex和localstorage语法

Vuex是什么？为什么要用它？

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

什么时候我们该使用它？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

 安装

npm安装：

npm install vuex@next --save 

核心概念

vuex中一共有五个状态 State  Getter  Mutation   Action   Module  下面进行详细讲解 

State

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data 

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

Action ——进行异步操作

Action和Mutation相似，一般不用Mutation 异步操作，若要进行异步操作，使用Action

原因：为了方便devtools打个快照存下来，方便管理维护。所以说这个只是规范，而不是逻辑的不允许，只是为了让这个工具能够追踪数据变化而已

Modules

当遇见大型项目时，数据量大，store就会显得很臃肿

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

 什么是localstorage语法

ocalStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 属性是只读的。

基本语法 

保存数据语法：localStorage.setItem(“key”, “value”);
读取数据语法：var lastname = localStorage.getItem(“key”);
删除数据语法：localStorage.removeItem(“key”);

清空数据语法：localStorage.clear()

获取指定下标数据语法：localStorage.key(0)

 

存储的数据格式

//声明数字类型
    let index = 1;
    console.log(typeof index); // number

//直接储存
    localStorage.setItem('currentPage', index);

//获取的是字符串类型
    let getIndex = localStorage.getItem('currentPage');
    console.log(getIndex); // 1
    console.log(typeof getIndex); // string