vuex初体验

1.先初始化项目，安装依赖和运行

 #进入工程目录
cd vuex-demo
#安装依赖 
npm install --save vuex 
#运行项目 
npm run serve

2.在src目录下创建store文件夹，创建index.js

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

// 引入 Vuex 插件 
Vue.use(Vuex)

const store = new Vuex.Store({ 
	// 注意V 和 S都是大写字母 
	// 存放状态（共享属性） 
	state: { 
		count: 1 
	} 
})
export default store

3.在main.js中全局引入

import Vue from "vue"; 
import App from "./App.vue"; 
import router from "./router"; 
// 导入的是 src/store/index.js 
import store from './store' 

Vue.config.productionTip = false; 

new Vue({ 
	router, 
	store, // 注册 
	render: h => h(App) 
}).$mount("#app");

4.在页面中直接获取

<template> 
	<div>
		count: {{ $store.state.count }} 
	</div> 
</template> 
<script> </script

5.改变状态值mutation
> 在 store 的 mutations 选项中定义方法，才可以改变状态值。
> 在通过 $store.commit(‘mutationName’) 触发状态值的改变

// 改变 state 状态
mutations: { 
	increment(state) { 
			state.count ++ 
	},
	decrement(state) { 
			state.count -- 
	}
}

调用

<template> 
	<div>
		count: {{ $store.state.count }} 
		<button @click="addCount">加法</button> 
		<button @click="decrement">减法</button> 
	</div> 
</template> 
<script> 
export default {
	methods: { 
		addCount() { 
			// 获取状态值
			console.log(this.$store.state.count) 
			// 通过commit 调用 mutations 中的 increment 改变状态值 
			this.$store.commit('increment') 
		},
		decrement() { 
			// 通过commit 调用 mutations 中的 decrement 改变状态值 
			this.$store.commit('decrement') 
		}
	}, 
}
</script>

6.提交载荷，你可以向 $store.commit 传入额外的参数，即 mutation 的 载荷（payload）

修改 src\store 下的 index.js

// ...
mutations: { 
	increment (state, n) { 
		// n 为载荷 
		state.count += n 
	}
}
// ...

修改 views\Home.vue组件

// ...
<script> 
export default {
	methods: { 
		addCount() { 
			// 获取状态值
			console.log(this.$store.state.count) 
			// 通过commit 调用 mutations 中的 increment 改变状态值 
			// this.$store.commit('increment') 	
			this.$store.commit('increment', 10) // 提交载荷 
		}
		// 。。。 
	}, 
}

7.action,
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是在组件中直接变更状态， 通过它间接更新 state。
在组件中通过 this.$store.dispatch(‘actionName’) 触发状态值间接改变
Action 也支持载荷
Action 可以包含任意异步操作。

实操
修改 store/index.js ，增加 actions 选项

const store = new Vuex.Store({ 
	// 注意V 和 S都是大写字母 
	// 存放状态（共享属性） 
	state: {
		count: 1 
	},
	// 改变 state 状态
	mutations: { 
		increment(state, n) { 
			// n 为载荷 
			// state.count ++ 
			state.count += n 
		},
		decrement(state) { 
			state.count -- 
		} 
	},
	actions: { 
		add(context, n) { 
			// 触发 mutations 中的 increment 改变 state
			context.commit('increment', n) 
		},
		decrement({commit, state}) { 
			// 按需传值
			commit('decrement') 
		} 
	} 
})

修改 views\Home.vue, 触发 action 改变值

<script> 
export default {
   methods: {
   	addCount() { 
   		// 获取状态值
   		console.log(this.$store.state.count) 
   		// 通过commit 调用 mutations 中的 increment 改变状态值 
   		// this.$store.commit('increment') 
   		// this.$store.commit('increment', 10)
   		// 提交载荷 
   		// 触发 actions 中的 add 改变状态值
   		this.$store.dispatch('add', 10) 
   	},
   	decrement(){ 
   		// this.$store.commit('decrement') 
   		this.$store.dispatch('decrement') 
   	}
   }, 
}
</script>

8. 派生属性 getter
   有时候我们需要从 store 中的 state 中派生出一些状态。
   例如：基于上面代码，增加一个 desc 属性，当 count 值小于 50，则 desc 值为 吃饭 ; 大于等于 50 小于
   100，则desc 值为 睡觉 ; 大于100 , 则 desc 值为 打豆豆 。这时我们就需要用到 getter 为我们解决。
   getter 其实就类似于计算属性(get)的对象.
   组件中读取 $store.getters.xxx

实操
修改 store\index.js ,增加 getters 选项
注意：getters 中接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数

const store = new Vuex.Store({ 
	// 注意V 和 S都是大写字母 。。。 
	//派生属性 
	getters: {
		desc(state) { 
			if(state.count < 50) { 
				return '吃饭' 
			}else if(state.count < 100) { 
				return '睡觉' 
			}else { 
				return '打豆豆' 
			} 
		} 
	}
})

修改 views\Home.vue, 显示派生属性的值

<template> 
	<div>
		count: {{ $store.state.count }} 
		<button @click="addCount">加法</button> 
		<button @click="decrement">减法</button> 
		派生属性desc: {{ $store.getters.desc }} 
	</div> 
</template>