vuex

阿超

发布于 2022-08-17 21:40:11

9250

发布于 2022-08-17 21:40:11

文章被收录于专栏：快乐阿超快乐阿超

人之贤不肖譬如鼠矣，在所自处耳！――《李斯列传》

聊聊vuex，官方文档：https://vuex.vuejs.org/zh/

介绍就不赘述了，直接上使用

安装：

cnpm install vuex --save

我们新建一个store，再创建一个index.js

再新建一个modules目录，里面放上value.js

在main.js中我们写入

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store';

Vue.config.productionTip = false

new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app')

挂载完毕后，我们编写main.js和value.js

main.js

// 页面路径：store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

// vue的插件机制
Vue.use(Vuex);

import ruben from '@/store/modules/value.js' 
//Vuex.Store 构造器选项
export default new Vuex.Store({
	modules: {
		// 模块
		ruben
	}
});

value.js

// vuex module
// 在外部使用`vuex`，可以如下引用
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
	// namespaced:true,
	// `state` 在外部访问可以使用 `mapState`
	// computed: {
	//	...mapState({
	//		value: state => state.ruben.value
	//	}),
	// }
	// 配置了`mapState`就可以使用 `this.value` 代替 `this.$store.state.ruben.value`
	state: {
		value: 'hello'
	},
	// `getters` 在外部访问可以使用 `MapGetters`
	// computed: {
	// 	...mapGetters(['getValue']) 
	// }
	// 配置了`MapGetters`就可以使用 `getValue` 代替 `this.$store.getters.getValue`
	// 取别名: 把 `this.getVuexValue` 映射为 `this.$store.getters.getValue`
	//	...mapGetters({getVuexValue:'getValue'})
	getters: {
		getValue: state => state.value
	},
	// `mutations` 在外部访问可以使用 `mapMutations`
	// methods:{
	// 	...mapMutations(['setValue'])
	// }
	// 配置了`mapMutations`就可以使用 `setValue(value)` 代替 `this.$store.commit('setValue', value)`
	// 取别名: 把 `this.setVuexValue(value)` 映射为 `this.$store.commit('setValue', value)`
	//	...mapMutations({setVuexValue:'setValue'})
	mutations: {
		setValue(state, value) {
			state.value = value
		}
	},
	// `actions` 在外部访问可以使用 `mapActions`
	// methods:{
	// 	...mapActions(['submitValue'])
	// }
	// 配置了`mapActions`就可以使用 `submitValue()` 代替 `this.$store.dispatch('submitValue', value)`
	// 取别名: 把 `this.submitVuexValue(value)` 映射为 `this.$store.dispatch('submitValue', value)`
	//	...mapMutations({submitVuexValue:'setValue'})
	actions: {
		submitValue(context, value) {
			console.log("context: ", context);
			return new Promise((resolve, reject) => setTimeout(() => {
				context.commit('setValue', value);
				resolve(value);
			}, 1000))
		}
	}
}

去掉注释长这样：

export default {
	state: {
		value: 'hello'
	},
	getters: {
		getValue: state => state.value
	},
	mutations: {
		setValue(state, value) {
			state.value = value
		}
	},
	actions: {
		submitValue(context, value) {
			console.log("context: ", context);
			return new Promise((resolve, reject) => setTimeout(() => {
				context.commit('setValue', value);
				resolve(value);
			}, 1000))
		}
	}
}

然后我们找个页面引用一下

<template></template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
	computed: {
		...mapState({
			value: state => state.ruben.value
		}),
		...mapGetters(['getValue'])
	},
	methods: {
		...mapMutations(['setValue']),
		...mapActions(['submitValue'])
	},
	created() {
		console.log('this: ', this);
		
		// state
		console.log('this.value: ', this.value);
		console.log('this.$store.state.value: ', this.$store.state.ruben.value);
		
		// mutations
		this.setValue('ruben');
		this.$store.commit('setValue', 'ruben');
		
		// getters
		console.log('this.getValue: ', this.getValue);
		console.log('this.$store.getters.getValue: ', this.$store.getters.getValue);
		
		// actions
		this.submitValue('achao').then(console.log);
		this.$store.dispatch('submitValue','achao').then(console.log);
	}
};
</script>

<style></style>

我们看输出结果