Vuex主要使用场景为大型单页应用,如果项目不是很复杂没有必要使用,Vuex能高效的完成状态管理
安装
安装:npm --save vuex
使用
vuex的使用与vue-router类似:
在main.js
里
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App'
Vue.use('Vuex');
const store = new Vuex.store({
/*----vuex配置-----*/
state: {
/*数据保存在store的state字段内,例如定义用户信息adminInfo*/
adminInfo: 'info...',
count: 0,
oneList: [1,3,14,7,19]
},
/*
* 涉及改变数据的使用mutations,存在业务逻辑的使用actions
*/
mutations: {
/**mutations用来修改state中的数据,对应组件提交的时间名称,mutations负责业务逻辑处理**/
increment(state) {
state.count ++;
},
/*
* mutations接受第二个参数
*/
decrease(state) {
state.count --;
}
},
/*
* getters提取组件computed中的公用方法
*/
getters: {
filteredList: state => {
return state.oneList.filter(item => item < 10);
},
/**getter可以依赖其他getter**/
filteredLength: function(state,getters) {
return getters.filteredList.length;
}
},
actions: {
asyncIncrement(context) {
return new Promise(resolve => {
setTimeout(() => {
context.commit('increment');
resolve();
},1000)
})
}
}
});
new Vue({
el: "#app",
/*----vuex使用-----*/
store: store,
render: h => h(App)
})
在组件内调用,index.vue
<template>
<div>
{{ adminInfo }}
{{ filteredList }}
<button type="button" @click="add">add</button>
<button type="button" @click="asyncClick"></button>
</div>
</template>
<script>
export default({
computed: {
/**使用state里的数据**/
adminInfo() {
return this.$store.state.adminInfo
},
/**调用使用getters过滤后的数据**/
filteredList () {
return this.$store.getters.filteredList;
}
},
methods: {
add() {
/**执行mutations里边的方法使用this.$store.commit的方式,组件只提交事件名**/
this.$store.commit('increment');
},
asyncClick() {
this.$store.dispatch('asyncIncrement').then(() => {
console.log(this.$store.state.count); // 1
})
}
}
})
</script>