vue之vuex的使用及举例

Vuex是专门为Vue.js设计的集中式状态管理架构，它允许你将所有的组件共享状态存储在一个单独的地方，即“store”，并以相应的规则保证状态以一种可预测的方式发生变化。以下是Vuex的基本使用方法：

一、安装Vuex

对于Vue 2项目，推荐使用与Vue 2兼容的Vuex 3版本。可以通过npm或yarn进行安装：

bash复制代码

	npm install vuex@3 --save
	# 或者
	yarn add vuex@3 --save

对于Vue 3项目，可以直接安装最新版本的Vuex：

bash复制代码

	npm install vuex --save
	# 或者
	yarn add vuex --save

二、创建Store

在项目的src目录下创建一个store文件夹，并在其中创建一个index.js文件。这个文件将用于配置和导出Vuex的store。

javascript复制代码

	// src/store/index.js
	import Vue from 'vue';
	import Vuex from 'vuex';
	Vue.use(Vuex);
	const state = {
	// 在这里定义你的状态
	count: 0,
	// 其他状态...
	};
	const mutations = {
	// 同步修改状态的方法
	increment(state) {
	state.count++;
	},
	decrement(state) {
	state.count--;
	},
	// 其他mutations...
	};
	const actions = {
	// 异步操作或复杂逻辑，最终调用mutations来修改状态
	incrementAsync({ commit }) {
	setTimeout(() => {
	commit('increment');
	}, 1000);
	},
	// 其他actions...
	};
	const getters = {
	// 基于state计算属性，用于获取一些派生状态
	doubleCount: state => state.count * 2,
	// 其他getters...
	};
	export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters,
	});

三、在Vue实例中引入Store

在main.js文件中引入并挂载store：

javascript复制代码

	// src/main.js
	import Vue from 'vue';
	import App from './App.vue';
	import store from './store/index.js';
	Vue.config.productionTip = false;
	new Vue({
	render: h => h(App),
	store, // 将store挂载到Vue实例上
	}).$mount('#app');

四、在组件中使用Vuex

1. 访问State：

在组件中，你可以通过this.$store.state.xxx来访问状态，但更好的做法是使用mapState辅助函数将状态映射为计算属性。

javascript复制代码

	<template>
	<div>
	<p>Count: {{ count }}</p>
	</div>
	</template>
	<script>
	import { mapState } from 'vuex';
	export default {
	computed: {
	...mapState({
	count: state => state.count,
	}),
	},
	};
	</script>

1. 提交Mutation：

你可以通过this.$store.commit('xxx')来提交mutation，同样地，使用mapMutations辅助函数可以将mutation映射为方法。

javascript复制代码

	<template>
	<div>
	<button @click="increment">Increment</button>
	<button @click="decrement">Decrement</button>
	</div>
	</template>
	<script>
	import { mapMutations } from 'vuex';
	export default {
	methods: {
	...mapMutations(['increment', 'decrement']),
	},
	};
	</script>

1. 分发Action：

你可以通过this.$store.dispatch('xxx')来分发action，使用mapActions辅助函数可以将action映射为方法。

javascript复制代码

	<template>
	<div>
	<button @click="incrementAsync">Increment Async</button>
	</div>
	</template>
	<script>
	import { mapActions } from 'vuex';
	export default {
	methods: {
	...mapActions(['incrementAsync']),
	},
	};
	</script>

1. 使用Getters：

你可以通过this.$store.getters.xxx来访问getters，使用mapGetters辅助函数可以将getters映射为计算属性。

javascript复制代码

	<template>
	<div>
	<p>Double Count: {{ doubleCount }}</p>
	</div>
	</template>
	<script>
	import { mapGetters } from 'vuex';
	export default {
	computed: {
	...mapGetters(['doubleCount']),
	},
	};
	</script>

五、模块化

当项目变得复杂时，可以将store拆分为多个模块（module）。每个模块拥有自己的state、mutations、actions和getters，最后是模块的namespaced属性，用于将模块的状态和操作封装起来，避免命名冲突。

javascript复制代码

	// src/store/modules/counter.js
	const state = {
	count: 0,
	};
	const mutations = {
	increment(state) {
	state.count++;
	},
	};
	const actions = {
	incrementAsync({ commit }) {
	setTimeout(() => {
	commit('increment');
	}, 1000);
	},
	};
	const getters = {
	doubleCount: state => state.count * 2,
	};
	export default {
	namespaced: true,
	state,
	mutations,
	actions,
	getters,
	};

在index.js中引入并使用这些模块：

javascript复制代码

	// src/store/index.js
	import Vue from 'vue';
	import Vuex from 'vuex';
	import counter from './modules/counter';
	Vue.use(Vuex);
	export default new Vuex.Store({
	modules: {
	counter,
	},
	});

在组件中使用模块化后的状态和操作时，需要指定模块名：

javascript复制代码

	<template>
	<div>
	<p>Count: {{ count }}</p>
	<button @click="increment">Increment</button>
	</div>
	</template>
	<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
	computed: {
	...mapState({
	count: state => state.counter.count,
	}),
	},
	methods: {
	...mapMutations('counter', ['increment']),
	},
	};
	</script>

以上就是Vuex的基本使用方法，包括安装、创建Store、在Vue实例中引入Store、在组件中使用Vuex以及模块化等。通过Vuex，你可以更方便地管理Vue应用中的状态，提高代码的可维护性和可测试性。