vue.js组件的数据和方法只有在它们所在的组件中可以互通的方位和使用,其他组件是无法读取和修改的。但是在实际业务中,经常有跨组件共享数据的需求,因此Vuex的设计就是用来统一管理组件状态的,它定义了一系列规范来使用和操作数据,使组件应用更加高效。
1、引入Vuex,基本配置:
npm install –save vuex
在main.js中引用
import Vuex from ‘vuex’
Vue.use(Vuex)
const store = new Vuex.Store({//vuex的配置})
new Vue({
//其他设置
store:store
})
仓库store包含了应用的数据(状态)和操作过程。Vuex里的数据都是响应式的,任何组件使用同一store的数据时,只要store的数据变化,对应的组件也会立即更新。
2、使用
const store = new Vuex.Store({
state:{
count:0
}
});
在任何组件内,可以直接通过$store.state.count来引用,如果觉得不够优雅,也可以用一个计算属性来显示:
<script>
export default {
computed: {
count () {
return this.$store.state.count;
}
}
}
</script>
完整示例:
//index.vue
<template>
<div>
<h1>首页</h1>
{{ count }}
<button @click="handleIncrement">+1</button>
<button @click="handleDecrease">-1</button>
<button @click="handleIncrementMore">+5</button>
<div>{{ list }}</div>
<div>{{ listCount }}</div>
<button @click="handleActionIncrement">action +1</button>
<button @click="handleAsyncIncrement">async +1</button>
</div>
</template>
<script>
export default {
computed: {
count () {
return this.$store.state.count;
},
list () {
return this.$store.getters.filteredList;
},
listCount () {
return this.$store.getters.listCount;
}
},
methods: {
handleIncrement () {
this.$store.commit('increment');
},
handleDecrease () {
this.$store.commit('decrease');
},
handleIncrementMore () {
this.$store.commit('increment', 5);
},
handleActionIncrement () {
this.$store.dispatch('increment')
},
handleAsyncIncrement () {
this.$store.dispatch('asyncIncrement').then(() => {
console.log(this.$store.state.count);
});
}
}
}
</script>
//main.js
const store = new Vuex.Store({
//这里面方数据,在组件中使用this.$store.state.xxx调用
state: {
count: 0,
list: [1, 5, 8, 10, 30, 50]
},
//类似于java的getter,统一的计算属性,在组件中使用this.$store.getters.xxx调用
getters: {
filteredList: state => {
return state.list.filter(item => item < 10);
},
listCount: (state, getters) => {
return getters.filteredList.length;
}
},
//相当于setter,从这里面修改数据的值,在组件中使用this.$store.commit调用
mutations: {
increment (state, n = 1) {
state.count += n;
},
decrease (state) {
state.count --;
}
},
//通常业务方法放在这里面,比如异步的方法,使用在组件中使用this.$store.dispatch调用
actions: {
increment (context) {
context.commit('increment');
},
asyncIncrement (context) {
return new Promise(resolve => {
setTimeout(() => {
context.commit('increment');
resolve();
}, 1000)
});
}
}
});