#WebStorage #cookie #VUEX

一. Web Storage

Web Storage提供了一种比Cookie更加直观的存储方式来存储键/值对

web storage 提供了两种存储机制：
localstorage   :为每个特定的源提供独立的存储区域,该区域内存储的数据在所有页面有效,即使关闭掉也会有
sessionstorage :为每个特定的源提供独立的存储区域,该区域存储的数据只在当前页面有效

这两同机制可以通过window.sessionStorage 和 window.localstorage  属性进行访问  (完全相同的属性和方法)

四个方法：

setItem()   //方法
存储指定的值到键名,如果键名存在,自动更新键值
window.localstorage.setItem("键名","键值")
window.sessionStorage.setItem("键名","键值")

getItem()   //方法
用于返回对应键名的值，如果键名不存在，则返回null，其语法结构是： 

window.localStorage.getItem("键名")
window.sessionStorage.getItem("键名")

removeItem()   //方法
用于删除指定的键名，其语法结构是：

window.localStorage.removeItem("键名")
window.sessionStorage.removeItem("键名")

clear()方法
用于删除所有的webStorage中存储的数据项，其语法结构是：

window.localStorage.clear()
window.sessionStorage.clear()

length属性
length属性用于获取WebStorage中存储的数据项的数量，其语法结构是：

variable = window.localStorage.length
ariable = window.sessionStorage.length

二. cookie

document.cookie属性既可以设置cookie，也可以获取cookie，其语法结构是：

//获取
variable = document.cookie

//设置
document.cookie = '名=值;expires=生命周期;path=路径'
expires参数需要使用格林尼治日期的表示形式，可通过Date对象的相关方法实现。
path表示cookie生效的路径，假设写为/a则表示只在a及其子目录中被访问到
清理cookie时需要再行设置cookie，只不过cookie的生命周期为当前日期的向前推算。

localStorage 一直都存在 除非手动清理
sessionStorage 关闭浏览器就会清除
cookie 可以设置生命周期

三. vuex

vuex本质就是一个vue的插件,它是专门为vue.js的应用程序开发的状态管理模式,采用集中式的管理方式：


比如：假设 a.vue b.vue c.vue d.vue  有一个username的变量,每个组件里都需要使用,如果每个页面都去声明一份是可以的,但是又两个问题,
维护起来比较麻烦,更改之后也办法让其他的也变同时修改


解决：vuex保存username的变量,所有调用这个变量的页面组件,自然会发生变化,类似CSS选择器 

常见的状态有：
(1)用户的登录状态
(2)购物车信息

安装：在安装vue脚手架里选择vuex特性；
npm安装：  npm install --save vuex

使用：
Vuex的状态存储在   src/store/index.js
vuex与全局变量有以下两个不同：
1.vuex的状态是响应式的
2.不能改变状态 而只能修改提交
结构：

import vue from "vue";
import vuex from vuex;
//vuex是作为vue的插件出现的
export default new vuex.store({//每一个vuex应用的核心是store,存储了vuex所有的状态
  state: {     //物品
  //定义了应用状态的数据结构,其数据类型可为string,number,boolean,array,object等
  },
  getters:{    //记账员
  //vue允许在store定义getters(可以认为store的计算属性),getters的返回值会被缓存起来.只有以来发生变化时候,才能重新计算
  	属性(方法)名称：(state){  //state可以省略掉,因为函数或方法不是必须带有参数,但在实践过程中state参数不可能省略掉,因为getters的作用任务 store的计算属性,既然是计算属性,必须存在依赖,该参数合法名称,任何命名都代表当前store中的所有state
	
	}
  },
  mutations: {  //搬运工
  //    //改变状态的唯一实现方式
  	方法名称(state,paylodd){  //payload称为载荷，指mutations中所传递的额外的参数，可以为任意数据类型。

	}
  },  
  actions: {    //拉货  作用与mutations类似,但区别在于,mutations不能产生异步操作,actions可以产生异步
  	方法名称(context,payload){
	
	}
  },
  modules: {
  }
})

组件中访问vuex中的state：
页面输出：{{this.$store.state.xxx}};
脚本数据：不需要{{}}

组件文件访问Vuex中的getters：
{{this.$store.getters.xxx}}

组件中访问vuex中的mutations:
脚本输出：this.$store.commit("方法名称")

组件中访问vuex中的Actions
this.$store.dispatch(方法名称)

Vuex中的辅助函数
为什么需要辅助函数?
A.将在页面组件中书写的大量的语句代码变得简短

B.可以为Vuex的state、getters、mutations、actions赋予别名
•mapState()
•mapGetters()
•mapMutations()
•mapActions()

使用辅助函数

mapState()函数
import {mapState} from 'vuex';
mapState()函数用于为组件页面创建计算属性以返回Vuex 中store内的state，也就是说，其把vuex中的state来作为当前页面组件的计算属性来使用，其语法结构是：//计算属性
computed:{
	...mapState(数组|对象)
}
 示例代码如下：
 import {maxState} from 'vuex';
 computed:{...mapState([
    'username',
    'age',
    'sex',
    'salary',
    'products'
	 ])
}
在页面组件中使用时直接进行相关的访问即可，示例代码如下：
姓名:{{username}}
示例代码如下：
import {maxState} from 'vuex';
computed:{{...mapState({
extension:'extends'
    })
}

mapGetters()函数
import {mapGetters} from 'vuex';
mapGetters()函数是为组件创建计算属性以返回Vuex中getters的返回值，其语法结构是：
computed:{
...mapGetters(数组|对象)
}
示例代码如下：
import {mapGetters} from 'vuex';
computed:{//以数组形式访问getters
		  //...mapGetters(['getCounts'])
		  //以对象形式访问getters
		  ...mapGetters({
		  productNum:'getCounts'
		  })}

mapMutations()函数
import {mapMutations} from 'vuex';
mapMutations()函数用于为页面组件创建组件内的方法以提交mutation，也就是说，其把Vuex中的mutations内的方法作为当前页面组件的方法来使用，其语法结构是：
methods:{
...mapMutations(数组|对象)
}
示例代码如下：
import {mapMutations} from 'vuex';
methods:{
 ...mapMutations({
    plus:'increment',
    minus:'decrement'
   }),
   inc(){
   //提交Mutations
   //this.$store.commit('increment');
    this.plus();
    },
   dec(){
   //提交Mutations
   //this.$store.commit('decrement');
    this.minus();
      }
}

 

import {mapMutations} from 'vuex';
methods:{
...mapMutations(['addProduct']),
 add(){
  //构建对象,之所以要构建如下结构的对象,是因为在Mutations
  //中payload参数要添加到products数组的未尾，而products中包含的
  //对象如下，所以为了正常的可以进行遍历输出，故构建如下结构的对象 
   
 let obj = {
   productName:this.productName,
   salePrice:this.salePrice
   }
  //提交Mutations      
  //this.$store.commit('addProduct',obj);
    this.addProduct(obj);
   //路由跳转
   this.$router.push('/access1');
	 }
  }

 mapActions()函数
import {mapActions} from 'vuex';
mapAtions()函数用于为页面组件创建组件内的方法以分发action，也就是说，其把Vuex中的actions内的方法作为当前页面组件的方法来使用，其语法结构是：
...mapActions(数组|对象)

问题：共享数据,但是只要刷新页面,数据又会回到设定值
解决：web storage