目录
- 一、安装和创建store
- 1、安装Vuex
- 2、创建store实例
- 二、在组件中使用store
- 1、获取state数据
- 2、触发mutations修改state
- 3、调用actions执行异步操作
- 4、使用getters获取派生数据
一、安装和创建store
1、安装Vuex
- 如果使用Vue CLI创建项目,可以通过以下命令安装Vuex:
npm install vuex --save
- 然后在main.js(或入口文件)中引入并使用Vuex:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
2、创建store实例
- 创建一个store.js文件(名称可自定义),在其中定义store。一个基本的Vuex store结构如下:
const store = new Vuex.Store({// 存储应用的状态state: {count: 0},// 定义修改状态的同步函数(唯一途径来修改state)mutations: {increment(state) {state.count++;},decrement(state) {state.count--;}},// 定义异步操作,可以在内部调用mutationsactions: {asyncIncrement(context) {setTimeout(() => {context.commit('increment');}, 1000);}},// 类似于计算属性,用于从state派生出新的数据getters: {doubleCount(state) {return state.count * 2;}}
});export default store;
二、在组件中使用store
1、获取state数据
- 在组件中,可以通过this.$store.state来获取store中的状态数据。例如,在一个Vue组件中:
<template><div><p>当前计数: {{ count }}</p></div>
</template>
<script>
export default {computed: {count() {return this.$store.state.count;}}
};
</script>
2、触发mutations修改state
- 要修改store中的状态,需要通过mutations。可以使用this.$store.commit方法来触发mutations。例如:
<template><div><button @click="increment">增加计数</button><button @click="decrement">减少计数</button></div>
</template>
<script>
export default {methods: {increment() {this.$store.commit('increment');},decrement() {this.$store.commit('decrement');}}
};
</script>
3、调用actions执行异步操作
- 对于异步操作,可以使用this.$store.dispatch来调用actions。例如:
<template><div><button @click="asyncIncrement">异步增加计数</button></div>
</template>
<script>
export default {methods: {asyncIncrement() {this.$store.dispatch('asyncIncrement');}}
};
</script>
4、使用getters获取派生数据
- 在组件中,可以像使用计算属性一样使用getters。例如:
<template><div><p>双倍计数: {{ doubleCount }}</p></div>
</template>
<script>
export default {computed: {doubleCount() {return this.$store.getters.doubleCount;}}
};
</script>
通过以上步骤,就可以在Vue项目中基本掌握Vuex store的用法,实现应用状态的集中管理和组件间的数据共享。