Vue进阶（五）：与 Vuex 的第一次接触
一、前言
在 项目中，如果项目结构简单，父子组件之间的数据传递可以使用 或者 等方式 （详参博文《》）。如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。 的状态管理工具 完美的解决了这个问题。
二、什么是Vuex? 为什么要使用Vuex ?
首先，我们需要知道 vue 是以单向数据流的方式驱动的。具有以下特点：
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
类似的状态管理器, 用来管理的所有组件状态，采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态机就是保存你的状态和状态变化的一个盒子。这里有一些不同种类的状态机，适用于我们这个案例的是有限状态机。像它的名字一样，有限状态机包含有限的几种状态。它接收一个输入并且基于这个输入和当前的状态决定下一个状态，可能会有多种情况输出。当状态机改变了状态，我们就称为它过渡到一个新的状态
每一个 应用的核心就是 （仓库）。基本上就是一个容器，它包含应用中大部分的状态 ()。 和单纯的全局对象有以下两点不同：
的状态存储是响应式的。当 组件从 中读取状态的时候，若 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
不能直接改变 中的状态。改变 中数据状态的唯一途径就是显式地提交 () 。
这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
三、安装并引入 Vuex
项目结构如下：
注：当应用变得比较复杂时候，对象有可能变的相当臃肿。在此情况下，允许将分割成模块（），每个模块有自己的，，，甚至是嵌套子模块等。
首先使用 安装 。
cnpm install vuex -S
然后在中 引入, 然后注入 。
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
// 让vue使用vuex工具来实现组件之间的数据共享
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
el: '#app',
// 注入 store
store,
render: h => h(App)
})
四、构建核心仓库 store.js
应用的状态 都应当存放在 里面， 组件可以从 里面获取状态，可以把 通俗的理解为一个全局变量的仓库。
但是和单纯的全局变量又有一些区别，主要体现在当 中的状态发生改变时，相应的 组件也会得到高效更新。
在 目录下创建一个 目录，将 放到 目录下。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态,存储数据的对象，我们可以将你需要存储的数据在这个state中定义
state: {
author: 'Wise Wrong'
}
})
export default store
这是一个最简单的 ，里面只存放一个状态 。
注：虽然在 中已经引入了 和 ，但是这里还得再引入一次.
五、将状态映射到组件
这是 footer.vue 的 html 和 script 部分。在 中，将 的值返回给 中的 author。页面渲染之后，就能获取到 author 的值。
六、在组件中修改状态
然后在 header.vue 中添加一个输入框，将输入框的值传给 中的 author，这里使用 Element-UI 作为样式框架。
上面将输入框 的值绑定为 inputTxt，然后在后面的按钮 上绑定 事件，触发 setAuthor 方法。
methods: {
setAuthor: function () {
this.$store.state.author = this.inpuTxt
}
}
在 setAuthor 方法中，将输入框的值 inputTxt 赋给 Vuex 中的状态 author，从而实现子组件之间的数据传递。
七、官方推荐的修改状态的方式
上面的示例是在 setAuthor 直接使用赋值的方式修改状态 author，但是 官方推荐使用下面的方法：
首先在 中定义一个方法 newAuthor，其中第一个参数 就是 ，第二个参数 msg 需要另外传入，然后修改 header.vue 中的 setAuthor 方法。
这里使用 调用中定义的函数 ，这个函数就是操作中定义的成员函数，并将 this.inputTxt 传给 msg，从而修改 author。
禁止直接改变 中的状态！
改变 中数据状态的唯一途径就是显式地提交 （）。这样显式地提交，可以让我们更好的跟踪每一个状态的变化，所以在大型项目中，更推荐使用第二种方法。
// 存储数据的对象，可以将需要存储的数据在这个state中定义
const state = {
// 当前登陆的用户名
username: ''
}
const mutations = {
// 提供一个方法，为state中的username赋值
// 这些方法有一个默认的参数，这个参数就是当前store中的State
setUserName (state, username) {
//存入一个值
state.username = username
localStorage.setItem('myname', username)
},
getUserName (state) {
//输出一个值
return state.username
}
}
//使用的时候---> 通过commit调用mutations中定义的函数，这个函数就是操作state中定义的成员的函数
// this.$store.commit('setUserName', res.data.username(请求返回的值))
const actions = {
setUserNameAction: ({commit}, username) => {
commit('setUserName', username)
},
getUserNameAction: ({commit}) => {
commit('getUserName')
}
}
// 通过action来触发mutations中的函数，这种触发方式是异步方式
//存入 this.$store.dispatch('setUserNameAction', res.data.username + 'aa')
//取出 this.currentUserName = this.$store.dispatch('getUserNameAction')
// Getters是从 store 中的 state 中派生出一些状态，即当出现多处需要导入某个状态时，结果不是很理想，所以getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
const getters = {
getUserName: (state) => {
return localStorage.getItem('myname')
}
}
//使用的时候，直接使用
// 你好：{{$store.getters.getUserName}}