Vuex模块化

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

store/index.js
【sumOptions、newsOptions分文件存放并利用modules配置项将其模块化】

import Vue from 'vue';
import Vuex from 'vuex';
import sumOptions from './sum';
import newsOptions from './news';
Vue.use(Vuex);
export default new Vuex.Store({
	modules: {
		sumOptions,
		newsOptions
	}
});

store/sum.js

export default {
	namespaced: true,  // 命名空间为true才可以通过mapState....使用'sumOptions'名字
	state: {
		sum: 0
	},
	actions: {
		addNumGt5(context, value) {
			if (context.state.sum > 5) {
				context.commit('addNum', value);
			}
		}
	},
	mutations: {
		addNum(state, value) {
			state.sum += value;
		}
	},
	getters: {
		addPrefix(state) {
			return '@' + state.sum;
		}
	}
}

store/news.js

export default {
	namespaced: true,
	state: {
		title: '新闻标题',
		content: '新闻内容'
	},
	actions: {},
	mutations: {},
	getters: {
		getInfo(state) {
			return state.title + '' + state.content;
		}
	}
}

以Count组件举例使用vuex中的状态

<template>
	<div>
		<p>总和为:{{sum}}</p>
	    <button @click="addNum(addend)">+</button>  <!-- 需要传入参数 -->
	    <button @click="addNumGt5(addend)">总和＞5才+</button>  <!-- 需要传入参数 -->
	    <p>{{addPrefix}}</p>
	</div>
</template>
<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex';
export default {
	name: 'Count',
	data() {
		return {
			addend: 1
		}
	},
	computed: {
		// 普通方式获取state
		sum() {
			return this.$store.state.sumOptions.sum;   // state中分了两个模块需要多加一层获取到sum
		},
		// mapState方式
		...mapState('sumOptions', ['sum']),  // 设置了namespaced=true才能在这里使用sumOptions获取到sum值

		// 普通方式获取getters
		addPrefix() {
			return this.$store.getters['sumOptions/addPrefix'];
		},
		// mapGetters方式
		...mapGetters('sumOptions', ['addPrefix']),
	},
	methods: {
		// 普通方式调用dispatch
		addNumGt5() {
			this.$store.dispatch('sumOptions/addNumGt5', this.addend);
		},
		// mapActions方式
		...mapActions('sumOptions', ['addNumGt5']),

		// 普通方式调用commit
		addNum() {
			this.$store.commit('sumOptions/addNum', this.addend);
		},
		// mapMutations方式
		...mapMutations('sumOptions', ['addNum'])
	}
}
</script>