vuex教程
时间: 2023-06-29 14:07:56 浏览: 48
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
下面是一个基本的Vuex应用程序的教程:
首先,你需要安装Vuex,可以通过npm来安装:
```
npm install vuex --save
```
然后,在你的Vue.js应用程序中引入Vuex和创建一个store实例:
```
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
}
},
actions: {
increment(context) {
context.commit('increment');
},
decrement(context) {
context.commit('decrement');
}
},
getters: {
getCount(state) {
return state.count;
}
}
});
export default store;
```
在store实例中,state表示应用程序中的状态。mutations表示可以修改状态的方法。actions表示可以提交mutation来修改状态的方法。getters表示可以从state派生出一些状态的方法。
在你的Vue.js组件中,你可以使用Vuex.store来访问state、mutations、actions和getters:
```
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
computed: {
...mapGetters(['getCount']),
count() {
return this.getCount;
}
},
methods: {
...mapActions(['increment', 'decrement'])
}
};
</script>
```
在这个组件中,我们使用了mapGetters和mapActions来映射getters和actions到组件的computed和methods中。
以上就是一个基本的Vuex应用程序的教程。当然,Vuex的功能远不止于此,你可以在官方文档中了解更多。