一、安装和创建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的用法，实现应用状态的集中管理和组件间的数据共享。