vuex的使用—详述

一、什么时候使用vuex
二、vuex的使用
三、vuex中 store 的固定内容

(1)**state：保存状态的**
(2)**mutaions 方法**
(3) getters的基本使用
(4) actions
(5) modules

四、vuex 的目录结构
五、版权声明：

本文纯原创，谢绝copy，如想转载，请提前留言告知，经本人允许后方可转载，违者必究！
不足

一、什么时候使用vuex

在多个页面得共享问题，比如：用户的登录状态，用户名、头像、位置信息，再比如商品的收藏、购物车中的物品等。

二、vuex的使用

我们首先需要下载依赖，并且做一些准备工作：

npm install --save vuex
创建仓库 store 就是创建一个名字叫 store 的文件夹
在仓库中创建 index.js （如果你使用的是ts，需要创建ts文件）；
在index.js中引入vue/vuex；

	import Vue from 'vue'
	import Vuex from 'vuex'

安装插件

	Vue.use(Vuex)

创建对象；

	const store = new Vuex.Store({
	
	})

导出store对象；

	export default store

在main.js中引入store文件并挂载在实例上

三、vuex中 store 的固定内容

(1)state：保存状态的

（单一状态树：在一个项目中只建立一个store，也就只有一个state 这样方便数据的管理）

在使用其中的数据的时候可以使用 $store.state.xxxx来获取。但是修改的时候一般不能直接通过该方式修改，而是需要一个过程
这些属性，都会被加入到响应式系统中去，响应式系统对其进行监听，如果其中某些属性发生变化，响应式系统就会通知界面，在用到这些属性的地方进行刷新

(2)mutaions 方法

这里边定义的方法有一个默认的参数 state 就是当前的状态，我们可以直接使用仓库里边的状态
在页面中，我们要想改变state里边的状态的时候，我们需要经过这个mutaions进行更改，这样的话使用devtools可以跟踪每一次状态的变化
注意：当我们需要经过mutaions进行变更state状态时，我们定义的方法需要通过 this.$store.commit(‘mutaions的方法名字’)来进行更改

—mutaions中方法的第二个参数（这里被称作是Payload 负载，就是携带了一个包袱给mutation）
- eg：根据用户需求点击一次性加多少
- eg：往数据中添加学生信息添加一个对象
mutation的提交风格
- 上边所写的都是使用 this.$store.commit(‘指向的方法名字’, 参数) 来提交的，这是普通的提交方式。
- 下边使用特殊的提交方式 this.$store.commit({type: ‘指向的方法名字’, count: ‘参数’}) 注意，这里的count是变量名可以起任意
响应式系统

在state中初始化的数据是放入到响应式系统中去的，如果我们想要添加新的属性到响应使系统中去，需要使用到Vue.set() 方法而不能直接调用未初始化过的属性

如上图所示虽然在devtools工具中我们可以看到它添加到info信息中去了，但是并没有渲染到界面上，下面我们使用Vue.set() 来创建新属性

这样就添加到响应式系统中去了。同样的如果想要删除响应式属性，就不能直接通过delete ，而需要通过Vue.delete() 来进行操作
mutations类型常量
- 从以上的eg当中，我们创建了许多的方法，使用 this.$store.commit(‘指向的方法名字’) 其中 “指向的方法名字” 必须和store 文件夹内 index.js 文件中的 mutations 中的方法名保持一致，很容易出错，因此官方推荐我们可以创建一个类型常量，避免我们书写时候出错
- 首先，我们在 store 文件夹下边创建一个 mutations-types.js 文件
- 然后，我们在该文件中定义类型常量并暴露出去
- 接着，我们在页面中引入并使用
- 此外，我们还需要在index.js文件中引用并使用
- 这样，就不用担心写错了

(3) getters的基本使用

一般在需要对所获取的数据先进行处理的时候使用，类似于computed的用法监听，它也有一个默认的参数 state 可以直接使用
在页面同过使用 $store.getters.方法名字来获取数据
getters的第二个参数就是它本身
按需获取数据的话需要返回一个函数，只有这样用户输入的参数才会被正确使用
eg: 输入年龄获取比该年龄大的学生数据

(4) actions

出现异步操作的使用要在执行mutations之前先在actions中执行
首先，我们需要在 actions 中定义一个方法提交到 mutations 中 ,让 mutations 中的方法对state 中的状态进行操作
然后，我们在页面中点击的时候需要提交到 actions 中，这里我们提交的时候用的是dispatch，而不是 commit
actions 中的方法除了默认的 context 参数外也可以有负载参数 payload
actions 中的方法返回 promise 告知用户提交处理完成
- 这里我们需要注意的是页面中点击事件触发后，使用 dispatch 提交到 actions 中，actions 中的方法 return 出 Promise 对象，promise 中的 resolve（）解决完成，我们的 .then（）方法是写到页面的 dispatch（）之后的

(5) modules

因为遵循单一状态树原则，我们 store 中的 state 会显得非常繁杂， modules 的出现就是为了解决这一问题的，他允许我们将 store 分割成模块（Module）而每个模块都拥有自己的state 、mutations、 actions、 getters
首先，我们需要在store之外定义模块
然后，我们需要在 store 中的 modules 中引用模块
模块中的 state 中数据的使用 $store.state.a.name 这里我们需要知道他是哪个模块下的name，不能省略
模块中 mutations 中方法的使用这里使用的时候和 store 中一样，他会依次寻找函数名，只要保证方法名不重复即可
模块中 getters 的使用 getters 中的方法拥有了第三个默认参数根节点中的 state
模块中 actions 的使用