vuex的getters和actions的使用

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

Vue.use(Vuex)

const store =  new Vuex.Store({
  state:{
    count:1
  },
  mutations:{
    increment(state){
      state.count++
    }
  },
  getters:{
    gettersCount(state){
      return state.count * 2
    }
  },
  actions:{
    actionsCount(context){
      //调用mutations的自增方法
      context.commit('increment')
    }
  }
})

export default store

this.store.getters.gettersCount访问store.js的getters

actions:

<template>
  <div class="about">
    这是about组件
    <br>
    <br>
    <br>
    <br>
    <!-- 3.引用store的count -->
    {{this.$store.state.count}}---{{this.$store.getters.gettersCount}}
    <button  @click="incre">累加</button>
  </div>
</template>

<script>
//1.引入store
import store from "../store.js"
export default {
  data(){
    return{
      title:"这是about组件"
    }
  },
  //2.注册
  store,
  methods:{
    incre(){
      //改变值的话，引用store.js的increment方法
      //this.$store.commit("increment")
      this.$store.dispatch('actionsCount')
    }
  }
}
</script>

 

即使用dispatch分发调用actions内的方法，再调用mutations的方法

 

转载 自https://blog.csdn.net/qq_26641781/article/details/83782883