面对社会上的不公与残忍，我们漠视，我们已经不再有心疼的感觉。而不公落到自己头上时，我们也没有理由控诉别人的冷漠。

本期主要内容

1.WebStorage

2.Vuex

1.WebStorage

1.1 概述

web storage 提供了一种比 cookie 更加直观方式来存储数据，其结构为键/值对 web storage 中提供两种存储机制：

localStorage ，为每个指定的源维护一个独立的区域，该区域中的数据即使在浏览器关闭后仍然存在，除非人为手动清除。

sessionStorage ，为每个指定的源维护一个独立的区域，该区域中的数据只在浏览器的会话期间有效。

这两种机制可以通过 window.sessionStorage 和window.localStorage进行访问。

1.2 sessionStorage

• setItem() 方法

setItem() 方法用于将键名添加到sessionStorage中，如果键名存在，则更新键值，语法结构是：

window.sessionStorage.setItem(key,value)

• getItem() 方法

getItem() 方法用于获取 sessionStorage 中指定键名的值，语法结构是：

window.sessionStorage.getItem(key)

• removeItem() 方法

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

window.sessionStorage.removeItem(key)

• clear() 方法

clear() 方法用于删除所有的键名，语法结构是：

window.sessionStorage.clear()

• length 属性

length 属性用于获取 sessionStorage 中存储的成员数量，语法结构是：

variable = window.sessionStorage.length

• key() 方法

key() 方法用于返回指定索引值的键名，但需要注意的是：键名的顺序由浏览器决定！

varible = window.sessionStorage.key(index)

该方法不能用于生产环境

1.3 localStorage

• setItem() 方法

setItem() 方法

setItem() 方法用于将键名添加到localStorage中，如果键名存在，则更新键值，语法结构是：

window.localStorage.setItem(key,value)

• getItem() 方法

getItem() 方法

getItem() 方法用于获取 localStorage 中指定键名的值，语法结构是：

window.localStorage.getItem(key)

• removeItem() 方法

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

window.localStorage.removeItem(key)

• clear() 方法

clear() 方法用于删除所有的键名，语法结构是：

window.localStorage.clear()

• length 属性

length 属性用于获取 localStorage 中存储的成员数量，语法结构是：

window.localStorage.length

• key() 方法

key() 方法用于返回指定索引值的键名，但需要注意的是：键名的顺序由浏览器决定！

variable = window.localStorage.key(index)

该方法不能用于生产环境

2.Vuex

2.1 什么是 Vuex ?

Vuex 是一个专门为 Vue 开发的应用程序状态管理模式。其实就是通过 Vuex 实现在各个组件中的数据共享。应用场景如：用户登录、购物车信息等。

2.2 安装

npm install --save vuex

如果在安装脚手架时已经选择 Vuex ，则无须再进行安装操作了
状态管理建议存储在 src/store 目录内
Vuex 本质就是 Vue 的一个插件

Vuex 的基本结构：

export default new Vuex.Store({
state: { },
mutations: { },
actions: { },
modules: { } 
})

store 就是一个容器，其包含了应用程序中的状态（数据）及针对状态的操作（方法）。

2.3 Vuex的核心概念

• state

state 定义了应用程序中状态的数据结构，其数据类型可以为 string 、 number 、 boolean 、 array 、 object 等，示例代码如下：

state: {

   username: 'Tom',

   age: 25,

   sex: true,

   friends: [

       {

           username: 'Rose',

           age: 21,

           address: '河北省'

       },

       {

           username: 'Frank',

           age: 20,

           address: '山东省'

       },

       {

           username: 'David',

           age: 19,

           address: '河南省'

       }

   ]

}

• mutations mutations 是改变状态的操作方法，也是 Vuex 中修改 state 的唯一方法

示例代码如下：

mutations: {

	//增加年龄

    age_increment_mutation:(state)=>{                  

        state.age ++;

    },

    //减少年龄

    age_decrement_mutation:(state)=>{

    	state.age --;

    } ,

    //payload,意为载荷

    age_add_mutation:(state,payload)=>{

    	state.age += payload;

    }

}

state 参数代表是当前 store 中的全部数据,也就是 store 中的 state 成员
而且 state 参数会自动注入到当前方法中

• Actions Actions 用于发送 AJAX 请求，其与 Mutations 的区别在于：

• Mutations 只能进行同步操作，而 Actions 可以发送异步请求

• 在操作数据，尤其是在操作异步数据时，先通过actions发送异步请求，再通知 mutations 来改变数据。

2.4. 页面组件访问Vuex中的数据

this.$store.state.变量名称

或

$store.state.变量名称

示例代码如下：

<div>

    <h1>访问数据--页面1</h1>

    <p>姓名:{{this.$store.state.username}}</p>

    <p>年龄:{{this.$store.state.age}}</p>

    <p>性别:{{this.$store.state.sex ? '男' : '女'}}</p>

    <h2>他/她有以下的好朋友：</h2>

    <p v-for="(friend,index) of this.$store.state.friends" :key="index">

        姓名:{{friend.username}} 年龄:{{friend.age}} 地址:{{friend.address}}

    </p>    

</div>

和

<div>

    <h1>访问数据--页面2</h1>

    <p>姓名:{{$store.state.username}}</p>

    <p>年龄:{{$store.state.age}}</p>

    <p>性别:{{$store.state.sex ? '男' : '女'}}</p>

    <h2>他/她有以下的好朋友：</h2>

    <p v-for="(friend,index) of this.$store.state.friends" :key="index">

        索引值:{{index+1}},姓名:{{friend.username}} 年龄:{{friend.age}} 地址:{{friend.address}}

    </p>

</div>

2.5 在页面组件中调用Mutations

通过 commit() 方法用于提交 mutations ,其语法结构是：

commit(方法名称[,参数])

示例代码如下：

<script>

export default {

  methods: {

    //增加年龄

    increment(){

        this.$store.commit('age_increment_mutation');

    },

    //减少年龄

    decrement(){

        this.$store.commit('age_decrement_mutation');

    },

    //调用按指定参数增加年龄的方法

    add(){

      this.$store.commit('age_add_mutation',5);

    }        

  }

}

</script>

2.6 在页面组件中调用Actions

dispatch(方法名称[,参数])

2.7 Vuex辅助函数

• mapState()

mapState() 函数用于为组件生成计算属性以返回 Vuex 中的状态，语法结构是：

mapState(array|object)

示例代码如下：

<script>

import {mapState} from 'vuex';

export default {

  //计算属性

  computed: {

    ...mapState(['username','age','sex','friends'])

  },

}

</script>

• mapMutations()

mapMutations() 函数用于创建组件方法以提交 mutations ，语法结构是：

mapMutations(array|object)

示例代码如下：

<script>

import {mapMutations} from 'vuex';

export default {

  methods: {

    // ...mapMutations([

    //   'age_increment_mutation',

    //   'age_decrement_mutation',

    //   'age_add_mutation'

    //   ]),

    ...mapMutations({

      a:'age_increment_mutation',

      b:'age_decrement_mutation',

      c:'age_add_mutation'

    }),

    //增加年龄

    increment(){

        //调用了仓库中名称为age_increment_mutation的理货员

        //this.$store.commit('age_increment_mutation');

        //this.age_increment_mutation();

        this.a();

    },

    //减少年龄

    decrement(){

       //调用了仓库中名称为age_decrement_mutation的理货员

        //this.$store.commit('age_decrement_mutation');

        //this.age_decrement_mutation();

        this.b();

    },

    //调用按指定参数增加年龄的理货员

    add(){

      //this.$store.commit('age_add_mutation',5);

      //this.age_add_mutation(5);

      this.c(5);

    }

  },

}

</script>

• mapActions

mapActions() 函数用于创建组件方法以分发 actions ，语法结构是：

mapActions(array|object)