Vuex的总结

1、state、mutations、actions、modules

state → 用来定义变量

mutations → 定义方法给state中的变量赋值

actions → 调用mutations中的方法执行

modules → 存放其他模块（其他的Store）

来张图更清晰

export default new Vuex.Store({
  //1、定义变量
  state: {
  },
  //2、给store中的变量赋值  
  mutations: {
      
  },
  //3、调用mutations中的方法
  actions: {
    
  },
  //其他的Store
  modules: {
  }
})

例子：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    Num:999
  },
  mutations: {
    ADD(state){
      state.Num += 1;
    }
  },
  actions: {
    FUNADD({commit,state}){ //结构{commit,state}
      //可以如下这样写，但不建议这样写
      //state.Num = 888
      //这样写
      commit('ADD')
    }
  },
  modules: {
  }
})

页面代码：

<template>
  <div>
    <!-- 直接获取值 -->
    {{$store.state.Num}}
    <button @click="add()">加+1</button>
  </div>
</template>

<script>
export default {
  data(){

  },
  mounted() {
    this.add()
  },
  methods:{
    add(){
      //用dispatch直接调用FUNADD，FUNADD是哪里来的呢? 来自actions中的FUNADD
      this.$store.dispatch('FUNADD');  //这里 FUNADD 是定义的一个常量名称，也可以是变量
    }
  }
}
</script>

----------------------------------------------------------------------------------------------

来升级一下 store/ index.js

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

Vue.use(Vuex)

var state = {
  Num:999
}

var mutations = {
  ADD(state){
    state.Num += 1;
  }
}

var actions= {
  FUNADD({commit,state}){ //结构{commit,state}
    commit('ADD')
  }
}

var getters = { //getters相当于计算属性
  isJiOrOu(state){
    return state.Num  % 2 ==0 ? '偶数':'奇数';
  }
}

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

<template>
  <div>
    <!-- 直接获取值 -->
    {{$store.state.Num}}
    <button @click="add()">加+1</button>
    <!-- 奇、偶数 -->
    <h1>{{$store.getters.isJiOrOu}}</h1>
  </div>
</template>

<script>
export default {
  data(){

  },
  mounted() {
    this.add()
  },
  methods:{
    add(){
      //用dispatch直接调用FUNADD，FUNADD是哪里来的呢? 来自actions中的FUNADD
      this.$store.dispatch('FUNADD');  //这里 FUNADD 是定义的一个常量名称，也可以是变量
    }
  }
}
</script>

未完待续。。。。。