vuex（三）小结

store严格模式：

const store = new Vuex.Store({//创建仓库实例
	strict: true//开启仓库严格模式、无论何时状态变更且不是通过mutation引起的都会报错，能保证所有的状态改变都能被调试工具跟踪到，生产环境不能开启
})
	

表单的双向绑定处理：

<template>
	<div class="user">
		<button @click="CHANGECOUNT(5)">改变count</button>
		{{count}}
		<button  @click="handleCount2">获取list</button>
		<hr/>
		<input type="text" v-model="msg"><!-- 直接这样是无法实现双向绑定的，并且会报错：该属性没有setter，因为更改store中的数据只能通过mutation -->
		<input type="text" :value="msg" @input="changeMsg"><!-- 这样就可以了，在input事件中触发了mutation事件并传递了事件源对象的value值 -->
		<hr/>
		<ul>
			<li style="background:green">我要买的：</li>
			<li v-for="(v, i) in tobuy">{{v.title}}</li>
		</ul>
		<ul>
			<li style="background:orange">我不买的：</li>
			<li v-for="(v, i) in nottobuy">{{v.title}}</li>
		</ul>
	</div>
</template>

<script>
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex';//引入语法糖对象
import {CHANGECOUNT} from '../vuex/mutation-types';//引入mutation事件类型名称
	export default{
		data(){
			return {

			}
		},
		computed: {
			// count(){
			// 	return this.$store.state.count;
			// }
			// 当计算属性的key和store的state的属性名相同时可以用mapState，都需要es7...对象扩展运算符：
			...mapState(['count'])//数组语法
			// 当计算属性的key和srote的state的属性名不相同时：用对象语法,此时计算属性名称为counter
			// ...mapState({
			// 	counter: state => state.count
			// })
			,
			tobuy(){//同样state的衍生状态也可以使用语法糖，引入mapGetters，语法跟mapState一样
				return this.$store.getters.tobuy;
			},
			nottobuy(){
				return this.$store.getters.nottobuy;
			},
			...mapState(['msg'])
		},
		methods: {
			// handleCount(){
			// 	 this.$store.commit(CHANGECOUNT, 5)//提交一个名为changeCount的mutation,第二个可选参数表示载荷，也可以是一个对象传入，也可以将type和载荷写成一个对象传入{type: 'changeCount', payload: 5}

			// 	 // this.$store.dispatch('fatchList');//提交一个包含异步请求的Action
			// },

			// ...mapActions(['fatchList']),//view事件函数名称和action事件名称一致时的数组语法
			// 名称不一致时对象与法：
			...mapActions({
				handleCount2: 'fatchList'
			}),

			//mapMutations语法糖有个坑，就是mutation要在view层的事件函数中进行传参（载荷）
			...mapMutations([CHANGECOUNT])
			// ...mapMutations({
			// 	handleCount: CHANGECOUNT
			// })
			,
			changeMsg(e){//当然也可以用mapMutations语法糖，这就原始语法了吧
				this.$store.commit('changeMsg', e.target.value)
			}
		}
	}
</script>

<style>
	.user{
		background: red;
	}
</style>

store中定义mutations：

mutations: {
		[CHANGECOUNT](state, payload){//第二个参数就是组件中传递过来的载荷
			state.count += payload;
		},
		[FATCHLIST](state, products){
			// state.products = products;//可以像这样直接赋值，但是一般不会这么做，因为多数情况是分页加载（添加数据）
			state.products = [...state.products, ...products];//利用扩展运算符这样解决了上面写法的小问题
		},
		changeMsg(state, val){//也懒得单独定义常量名了，正好做个对比，效果一样
			state.msg = val;
		}
	},

总结下吧：

现在再回过头看下这张图，一下就理解了vuex的工作原理了

什么情况下我应该使用 Vuex？

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。