Vue之vuex的简单使用

读了一遍官网资料总结一下vuex的基本用法，这里介绍的是基于vue-cli开发的用法因此跟官方的写法略有不同。

一，vue是什么。

官方解释Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
在一些应用比较复杂的单页面项目里使用vuex比较合适，因为当兄弟、父子组件数据通信、共用状态过多时这些状态会变得让你难以管理，当某部分出现问题便要用大量时间去组件中查改代码，这并不是我们开发者想要的，因此用一个vuex来集中管理各个状态是比较好的选择。

二，vuex应用结构

vue中的单项数据流结构如下：



上图表明用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。

vuex的应用结构如下图：



vuex中的state、action、mutation的关系。

state负责存储整个应用的状态数据，要注意在入口文件main.js注入store对象，就可以在根组件下的子组件使用this.$store.state获取状态了。

mutation里面写着改变状态数据的方法（一定要写在这里），mutation是同步事件要注意，里面的方法不能写异步的，组件中触发一个mutation的方法store.commit(mutationName)。

action也是一个改变状态数据的事件，但不同的是action改变状态是通过调用mutation来实现的，注意action是个异步事件。直接触发action就使用this.$store.dispatch(actionName)。

三，vuex的简单使用

1，下载安装

npm install --save vuex
//注意要带save

2，src目录下建文件夹和文件结构是src/store/store.js，store.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increase (state) {
state.count++
}
},
actions: {
actionIncrease ({commit}) {
commit('increase')
}
}
})
export default store

3，在入口文件main.js引入，并挂载到根节点

import Vue form 'vue';
import Vuex from 'vuex';
import store from './store/store.js'
Vue use(Vuex);
new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})

4，子组件调用状态值count，并通过点击触发action提交mutation来增加数值

子组件模板：

<template>
<span>{{count}}</span>
<b
a1e0
utton @click="add">增加数值</button>
</template>
<script>
export default {
computed:{
count () {
return this.$store.state.count;
}
},
methods: {
add() {
this.$store.dispatch('actionIncrease')
}
}
};
</script>

ok，以上就是vuex的简单使用了，别的组件如需调用或修改vuex的数据状态也依此法使用。