一、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)。
二、安装
1、npm install --save vuex
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>
<button @click="add">增加数值</button>
</template>
<script>
export default {
computed:{
count () {
return this.$store.state.count;
}
},
methods: {
add() {
this.$store.dispatch('actionIncrease')
}
}
};
</script>