vuex理解。

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么是“状态管理模式”？

让我们从一个简单的Vue计数应用开始：

这个状态管理应用包含以下几个部分：

state,驱动应用的数据源。

view,以声明的方式将state映射到视图。

actions,响应在view上的用户输入导致的状态变化。

单向数据流理念的极简示意图

但是当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

1.多个视图依赖于同一个状态。

2.来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常的繁琐，并且对于兄弟组件的状态传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或则通过事件变更和同步状态的多份拷贝。

以上方法不利于代码的维护。

Vuex借鉴了Flux，Redux，和The Elm Architecture.

1.引入vuex，利用npm包管理工具，进行安装Vuex。

npm install vuex --save

需要注意的是这里一定要加上--save，因为这个包是在生产环境中使用的。

2.新建一个vuex文件夹，并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

01，import Vue from 'vue';

02，import vuex from 'vuex';

3.使用vuex，引入之后用Vue.use进行引用。

Vue.use(vuex);

然后导出：

export default new vuex.Store({})

4.main.js文件中全局引用。

import store from ‘store.js文件路径’;

new Vue ({

    store,

})

入门小demo

1.在store.js文件里增加一个常量对象。

01写法：

const state = {

    count:1

}

export default new vuex.Store({

    state

})

02写法：

 export default new vuex.Store({

    state:{

        count:1

    }

})

2.新建一个vue模板,并在模板中使用{{$store.state.count}}输出count的值。

3.在store.js文件中加入两个改变state的方法。

以第二种方法为例子：

mutations:{

    add(state){

        state.count++;

    }

    reduce(state){

        state.count--;

    }

}

4.在vue模板中加入两个按钮，并调用mutations中的方法。

实现vuex中的count加减

2.state访问状态对象。

把store.js中的状态对象赋值给模板里data中的值，有三种赋值方式。

1.通过computed的计算属性直接赋值。

computed:{

    count(){

        return this.$store.state.count;

    }

}

2.通过mapState的对象来赋值。

01，import {mapState} from 'vuex';

02，computed:mapState(["count"]);当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

mapState的另一种用法：

mapState与局部计算属性混用：

3.模板获取Mutations方法。

更改Vuex的store中的状态的唯一方法是提交mutaition。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数。

mutation调用方法：

4.getter

有时我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数：

Getter接受state作为其第一个参数，Getter会爆露为store.gettres对象，你可以以属性的形式访问这些值：

this.$store.getters.doneTodos;

Getter也可以接受其它getter作为第二个参数：

我们可以很容易的在任何组件中使用它：

也可以通过方法访问：你可以通过让getter返回一个函数，来实现给getter传参。在你对store里的数组进行查询时非常有用。

mapGetters辅助函数

5.Action

action的作用跟mutation的作用是一致的，它提交mutation从而改变state。

Action类似于mutation，不同在于Action提交的是mutation，而不是直接更改状态。Action可以包含任意异步操作。

注册一个简单的action:

Action函数接受一个与store实例具有相同方法和属性的context对象，因此可以调用context.commit提交一个mutation，或则通过context.state和context.getters来获取state和getters。实践中，我们经常会使用ES2015的参数解构来简化代码，特别是需要调用commit很多次的时候：

Action通过store.dispath方法触发：

Actions支持同样的载荷方式和对象方式进行分发：

你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：