一、单向数据流 概念：单向数据流指只能从一个方向来修改状态。下图是单向数据流的极简示意：
于单项数据流对应的是双向数据流（也叫双向绑定）。在双向数据流中，Model（可以理解为状态的集合）中可以修改自己或其他Model的状态，用户的操作（比如输入框中输入内容）也可以修改状态。这使改变一个状态可能会触发一连串的状态的变化，最后很难预测最终的状态是什么样的。是的代码变得很难调试。
与双向数据流比较，在单向数据流中，当你需要修改状态，完全重新开始走一个修改的流程。
这限制了状态修改的方式，使状态变得可预测，容易调试。
二、单项数据流的使用场景
多个组件会共享状态时，共享状态和组件间（兄弟组件）通信变得不容易。我们把共享状态抽取出来，用单项数据流的方式会变得容易。
比如子组件给 父组件的兄弟组件 的 子组件传值：两个组件需要同时获取一组数据，如果一个组件将这个数据改变了，就需要给另一个组件传参，才能让另一个组件中的数据发生改变。）
如果有一个状态管理器，将共用的状态分发给两个组件， 其中一个组件将公用的状态改变，则由于状态管理器中的状态发生改变，使得派发给另一个组件的状态，也随之发生改变。
状态改变，会造成视图的二次渲染
三、状态管理器的流程vue的组件先派发（dispatch）一个行为（actions）,
actions进行触发变更（commit）状态，提交给Mutations,
Mutations将状态（State）进行改变
然后State派发状态给组件，进行二次渲染
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)（不是所有状态都放进vue，比如只有一个组件需要的状态）。Vuex 和单纯的全局对象有以下两点不同：
1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
四、开始使用
1、安装：
cnpm i vuex -S
2、目录结构
3、store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import state from './state.js';
import mutations from './mutations.js';
import actions from './actions.js';
var store = new Vuex.Store({
state,
getters: {
//按照正常逻辑，此处代码需要写成模块---作用就类似state的计算属性===在组件内部中使用计算属性获取，计算属性名称最好同名
fashionNum(state){
console.log(state.fashionlist.length)
return state.fashionlist.length
}
},
mutations,
actions
})
export default store;
4、main.js --- 根组件引入 vuex---store
import store from './store';
new Vue({
el : '#root',
router,
store,
compoents: { App },
template: '</Appy>'
})
5、store/state.js --- 状态管理其中的各个初始状态
export default{
"bannerlist" : [],
"navlist" : [],
"fashionlist" : []
}
6、store/action.js --- 异步请求数据，提交 mutation --- 依赖请求数据的模块
api/homeData.js
请求数据成功，调用 context.commit({
type : mutationName,
result : data //参数
//type的值不可以更改，参数的key值可以随意更改，主要注意和mutation中调用一直即可，
})
//以上类似于 react中 redux 设置状态 store.dispach({})发送action
import * as types from './mutations-types.js';
import homeData from '@/api/homeData.js';
export default {
// 我们可以使用 ES2015 风格的计算属性命名功能，来使用一个常量作为参数名
bannerlistaction(context){
//请求数据
homeData.bannerlist((data) => {
console.log(data)
context.commit({
type: types.BANNER_LIST_MUTATION,
result: data
})
})
},
navlistaction(context){
homeData.navlist((data) => {
console.log(data)
context.commit({
type: types.NAV_LIST_MUTATION,
result: data
})
})
},
fashionlistaction(context){
homeData.fashionlist((data) => {
console.log(data)
context.commit({
type: types.FASHION_LIST_MUTATION,
result: data
})
})
}
}
7、store/mutations.js --- 唯一改变状态的地方
import * as types from './mutations-types.js';
//注意参数的形式，默认我们使用对象传参，传参的key值为result
export default {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[types.BANNER_LIST_MUTATION]( state, data ){
state.bannerlist = data.result;
},
[types.NAV_LIST_MUTATION]( state, data ){
state.navlist = data.result;
},
[types.FASHION_LIST_MUTATION]( state, data ){
state.fashionlist = data.result;
}
}
8、组件中出发action进行取得数据
mounted(){
this.$store.dispatch('bannerlistaction'),
this.$store.dispatch('navlistaction'),
this.$store.dispatch('fashionlistaction')
}
9、在组件中显示数据 --- 用到辅助函数 mapState和计算属性
import { mapState } from 'vuex';
computed: {
test(){
//模块自带的计算属性
return "111"
},
fashionNum(){
//store中的getters获取到的值
return this.$store.getters.fashionNum
},
...mapState(
//状态管理器中使用到的初始状态，名称二者一致
['bannerlist', 'navlist', 'fashionlist']
)
}
五、总结
Vuex 是 vue 官方提供的一个状态管理模式，也就是我们俗称的状态管理器。通常我们的组件之间传递数据符合单项数据流的概念（水往低处流），但是我们不得不考虑多个组件共同享用同一个状态和 改变需要多次备份的问题，所以提出了一个独立的东西进行状态管理，这就是 vuex。
Vuex 的使用有几条基本的原则，数据存储的地方叫 store，它是一个单一的数据源，它需要挂载到根组件上，这样就可以通过this.$store在任何组件中可以访问。
唯一改变状态的方式，就是显示地提交 mutation, mutation可以采用常量的形式编写，并且他是同步的，如果你要使用异步操作，那么你必须使用到 store 中的两一个选项 actions , action有一个参数 context 上下文对象，我们可以直接通过 context.commit( ) 出发改变 mutation
我们将展示数据的时候，可以通过组建的计算属性 即可 mapState 的辅助函数在组件中获取数据，如果你要请求数据，只需要 dispatch 一个对应的action 即可，这样我们就完成对于数据，也就是状态的完全分离的管理办法。
