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
    

 

你可能感兴趣的:(前端,javascript,开发语言)