Vuex中辅助函数的用法

App.vue

<template>
  <div>
    <div>uname:{{ uname }}</div>
    <div>age:{{ age }}</div>
    <div>like:{{ like }}</div>
    <!-- 手动触发methods -->
    <button @click="change(777)">{{ $store.state.age }}</button>
    <button @click="change1(888)">{{ $store.state.num }}</button>
    <button @click="change2(999)">{{ $store.state.count }}</button>
    <hr />
    <p>{{ getzhu }}</p>
    <p>{{ getzhu1 }}</p>
    <p>{{ getzhu2 }}</p>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
export default {
  // methods手动触发,computed自动触发
  computed: {
    ...mapState(['uname', 'age', 'like']),
    ...mapGetters(['getzhu', 'getzhu1', 'getzhu2'])
  },
  methods: {
    ...mapMutations(['change', 'change1', 'change2'])
  }
}
</script>

<style lang="scss" scoped>
</style>

组件数据共享的store,index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    uname: "zhu",
    age: 7,
    like: "music",
    num: 8,
    count: 9
  },
  mutations: {
    //更改state中的值
    change(state, x) {
      //更改state的值
      state.age = x
    },
    change1(state, y) {
      //更改state的值
      state.num = y
    },
    change2(state, z) {
      //更改state的值
      state.count = z
    }
  },
  //注意getters属性要return返回新值
  getters: {
    getzhu(state) {
      return state.age * 2
    },
    getzhu1(state) {
      return state.num * 2
    },
    getzhu2(state) {
      return state.count * 2
    }
  }
})

应用结果