一、vuex之store

1､vuex 定义

管理状态 + 共享数据，在各个组件间管理外部状态

2､使用

a、引入vuex，并通过use方法使用它

b、创建状态仓库

c、通过this.$store.state.xxx 直接拿到需要的数据

//创建状态仓库，切记 Store(首字母一定要大写)，state 不能改
var store = new Vuex.Store({
    state:{
        XXX:xxx //XXX是方法名
    }
})
    
// 直接通过 this.$store.state.XXX  拿到 全局状态

二、vuex 状态管理流程

1､状态管理流程

view ——> actions ——> mutations ——> state ——> view

三步曲：

a、首先视图接收到信号，走actions

b、走完actions之后，才会走mutations

c、通过mutations来直接操作 state ，改变状态

小总结

mutations直接操作state，actions操作mutations

其中在这过程中actions 是可有可无的
如果有actions，先actions，然后mutations
如果没有actions，直接mutations，但是有异步操作，必须走actions

2､改变状态

//创建状态仓库，切记 Store(首字母一定要大写)，state 不能改
var store = new Store({
    state:{
        XXX:xxx //XXX是方法名
    },
    mutations:{
       .....
    }
})
    
this.$store.commit(XXX) //此处的XXX是你在mucations中定义的方法名
    
var store = new Vuex.Store({
    state:{// state 是 存放定义的状态
      num:88 //定义的状态
    },
  
    mutations:{//改变定义的状态
      increase:function(state){
        state.num++
      },
  
      decrease(state){//es6写法
        state.num-=20
      }
    },
  
    actions:{ //context为上下文对象
        decreaseAction:function(context){
          
          context.commit('decrease')
          //actions中只能对mutation进行操作
//也就是说，decrease一定是 mutations中定义的，才可以使用
              
          //异步操作一定要写在action中 
          // setTimeout(() => {
          //   context.commit('decrease')
          // }, 1000);
        }
    },
  
    getters:{
      getNum(state){
        return state.num > 0 ? state.num : 0
      }
    }
  
 })

3､如何调用

export default {
    name: 'parent',
    data:function(){
        return {
            toSonMsg: '我是你的父亲',
            fromSonMsg:''
        }
    },
    components:{
        son
    },
    methods:{
        getMsgFromSon:function(value){
            this.fromSonMsg = value
        },
        padd(){
            this.$store.commit('increase')
        },
        paddaction(){
            this.$store.dispatch('decreaseAction')
        }
    },
    computed:{
        getCount:function(){
            // return this.$store.state.num
            return this.$store.getters.getNum
        }
    }
}

4､ mutations VS actions

a、接收的参数不一样

mutations的参数：state （可以直接传状态）
actions 的参数：context（只能是上下文对象）

b、调用的方法不一样

mutations：this.$store.commit('XXX')
actions：this.$store.dispatch('XXX')

c、里面包含的函数要求不一样

actions：可以包含异步操作
mutations：只能包含同步操作

Vuex