Vuex 使用姿势

1、普通使用姿势：

store:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		count: 0
	},
	// 需要对状态里面的数据进行逻辑处理， 相当computed。
	getters: {
		doubleCount(state) {
			return state.count * 2;
		}
	},
	mutations: {
		setCount(state, count) {
			state.count += count;
		}
	},
	actions: {
		setCountSync(ctx, count) {
		
			/**
			 *需要执行的方法: ctx.commit.bind(null)
			 *
			 *定时时间:100
			 *执行方法的第一个参数:"setCount"
			 *执行方法的第二个参数:count
			 
			 */
			setTimeout(ctx.commit.bind(null), 100, "setCount", count);
			// setTimeout(()=>{
			// 	ctx.commit("setCount",count)
			// },100)
		}
	}
})

组件中使用的方式：

<template>
	<div>
		<h1>{{countAlias}}</h1>
		<h1>{{doubleCount}}</h1>
		<h1>{{count}}</h1>
		<button @click="setCount(1)">count++1</button>
		<button @click="setCount2">count++5</button>
		<button @click="setCountSyncAlias(2)">setCountSyncAlias++3</button>
	</div>

</template>

<script>
	import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
	export default {
		name: 'vuex1',
		computed: {
			...mapGetters(['doubleCount']),
			...mapState(['count']),
			// 给状态取别名
			...mapState({
				countAlias: state => state.count
			}),


		},
		mounted() {
			console.log(this.$store.state.count);
			console.log(this.$store.getters.doubleCount);
		},
		methods: {
			// 1、直接解构mapxx函数返回的对象
			...mapMutations(['setCount']),
			// 2、使用实例来访问
			setCount2() {
				this.$store.commit('setCount', 5)
			},
			// 3、用别名来代替store里面的名字
			...mapActions({
				setCountSyncAlias: "setCountSync"
			}),
		}
	}
</script>

<style>
</style>

2、抽离state, getters, mutations,  actions,为独立文件
  

//1、入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import state from "./state.js"
import getters from "./getters.js"
import mutations from "./mutations.js"
import actions from "./actions.js"

Vue.use(Vuex)

export default new Vuex.Store({
	state,
	getters,
	mutations,
	actions,
})

//2、state文件
export default{
	count: 0
}

//3、getters文件
export default{
	doubleCount(state) {
		return state.count * 2;
	}
}

//4、mutations文件
export default{
	setCount(state, count) {
		state.count += count;
	}
}
//5、actions文件
export default {
	setCountSync(ctx, count) {
		setTimeout(ctx.commit.bind(null), 100, "setCount", count);
	}
}

3、模块化：
  

//1、状态管理入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import shopCar from "./shopCar"
Vue.use(Vuex)

export default new Vuex.Store({
	modules: {
		shopCar
	}
})


//2、 ./shopCar/index.js文件

import state from "./state.js"
import mutations from "./mutation.js"
export default{
	namespaced:true,//*************开启命名空间非常重要*****************
	state,
	mutations
}

//3、state文件
export default{
	count:20
}

//4、mutation文件
export default{
	setCount(state,count){
		state.count+=count;
	}
}

组件的使用方式：

<template>
	<div>
		<h1>{{count}}</h1>
		<button @click="setCount(1)">count++</button>
		<button @click="setCount3">count++3</button>
	</div>

</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name: 'vuex2',
		mounted() {
			console.log(this.$store.state.shopCar.count);
		},
		computed: {
			// ...mapState("shopCar", {
			// 	count: state => state.count
			// })
			...mapState("shopCar",['count'])
		},
		methods: {
			...mapMutations("shopCar",['setCount']),
			setCount3(){
				console.log(this.$store);
				this.$store.commit("shopCar/setCount",3)
			}
		}
	}
</script>

<style>
</style>

和普通方式的区别需要指定“模块的名称”比如上面的shopCar:

...mapMutations("shopCar",['setCount']),

console.log(this.$store.state.shopCar.count);

this.$store.commit("shopCar/setCount",3)