Vue 学习笔记 05——状态管理Vuex
Vue 学习笔记 01——iview
Vue 学习笔记 02
Vue 学习笔记 03——组件篇
Vue 学习笔记 04——TabPanel
Vue 学习笔记 05——状态管理Vuex
===================================正文分割线==================================
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。流程如下官网图所示：
基础知识
1. store
Vuex 的核心就是 store（仓库），它就像一个容器，包含着应用中大部分的状态 state .Vuex与全局对象的不同在于：
1）Vuex状态存储为响应式的，store中的状态发生改变时，相应的组件也会更新
2）不能直接改变store中的state，唯一途径是显示的提交(commit）mutation。这样方便跟踪每一个状态的变化
2. 简单的创建store
1）在main.js中引入创建store
* 创建后可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更
import Vue from 'vue'
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})2) 然后在Vue实例中，提供创建好的store，如此便可在组件中访问到this.$store中的property
new Vue({
el: '#app',
store: store,
})3)现在可以在计算属性computed中，返回状态
computed:{
count(){
return this.$store.state.count;
}
}4)当状态需要改变时，可通过在组件的 methods 中提交（commit） mutation
methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
}3.四个核心概念
1）State
a）所有的状态定义在state对象中；
b）从 store 实例中 读取状态 最简单的方法就是在 计算属性 中返回某个状态；
c）Vuex提供一种机制将状态从根组件“注入”到每一个子组件中（ 需要调用Vue.use(Vuex) ）：
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
通过根实例注册的store，改store实例会注入到根组件下的所有子组件，且子组件能通过this.$store访问到，如下：
const Counter = {
template: `{{ count }}`,
computed: {
count () {
return this.$store.state.count
}
}
}d）辅助函数 mapState
当一个组件要获取多个状态的时候，可使用 mapState 辅助函数帮助我们生成计算属性,这样简洁一些。
当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
import { mapState, mapGetters } from 'vuex'
...
computed:{
...mapState(['userInfo']),
...mapGetters(['memberInfo'])
},
...2）Getter
可以理解为是获取数据的，有时候我们需要从 store 中的 state 中派生出一些状态，例如根据userState的值显示用户等级：
a）Getter 接受 state 作为其第一个参数
export default{
memberInfo(state){
switch (state.userStatus){
case 0:
return '普通会员';
break;
case 1:
return 'VIP会员';
break;
case 2:
return '高级V'+ state.vipLevel +'会员';
break;
default:
return '普通会员';
break;
}
}
}b）使用时，也可用辅助函数 mapGetters
3）Mutation
a）它是更改 Vuex 的 store 中状态的唯一方法是提交 mutation. 而 mutation 类似一个事件，每一个 mutation 都有一个字符串的事件类型和一个回调函数，回调函数就是我们状态要进行更改的地方，并且它会接受 state 作为第一个参数。
b）Mutation 必须是同步函数
例如：登录后修改userStatus
//登录组件的login()中
//commit中有两个参数
//第一个参数，对应的是mutation中的函数名
//第二个参数，多数情况下是一个对象
self.$store.commit('setMemberInfo',{
userStatus:0,
vipLevel:0
});//mutations.js中
export default{
//登录调用，重置用户信息
login(state, v){
state.userInfo = v;
},
//重新修改用户等级状态
//第一个参数接收state
//第二个参数接收组件中commit传来的值
setMemberInfo(state,v){
state.userStatus = v.userStatus;
state.vipLevel =v.vipLevel;
}
}4）Action
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
a）注册一个简单的 action：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})由于 Action函数 接收一个 与store实例具有相同方法和属性 的 context 对象，因此可以用context.commit来提交一个mutation，
而实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候），如下案例：
actions: {
increment ({ commit }) {
commit('increment')
}
}//actions.js中
export default{
//分发的时候有传值的情况
buyVip({commit},e){
//mock api交互
return new Promise((resolve,reject)=>{
setTimeout(()=>{
//修改本地state
commit('setMemberInfo',{
userStatus:e.userStatus,
vipLevel:e.vipLevel
})
resolve('购买成功')
},1000)
})
},
//分发的时候无值，但需要使用state的情况
getFreeVip({commit,state}){
//mock api 交互
return new Promise(function(resolve,reject) {
setTimeout(function(){
if(state.userStatus === 0){
//仅限普通会员才能分享获得高级会员资格
commit('setMemberInfo',{
userStatus:1,
vipLevel:0
});
resolve('分享成功，您已获得一个月的高级vip');
}else{
resolve('分享成功');
}
},1000)
})
}
}b）通过 dispatch 分发 action：
store.dispatch可以处理被触发的action函数返回的Promise，并且仍旧返回Promise，如下：
methods:{
buy:function(e){
//正常是与后台交互，传递会员信息与购买缴费
//此处是本地数据的处理
//第一个参数是actions.js中的函数名
//第二个参数是需要传的值
store.dispatch('buyVip',e).then(res=>{
alert(res);
})
}
}