vuex

vuex

mapGetters 辅助函数​

<template>
  <div id="app">
    <HelloWorld msg="Hello Vue in CodeSandbox!" v-if="show" />
    <!-- <img alt="Vue logo" src="./assets/logo.png" width="25%" /> -->
    <span>watch num = {{ num }}</span>
    <br />
    <span>store count = {{ count }}</span>
    <br />
    <span>computedStoreCount = {{ computedStoreCount }}</span>
    <br />
    <span>doneCount = {{ doneCount }}</span>
    <br />
    <button @click="add">add</button>
    <section>
      <p>income money ={{ receivedMoney }}</p>
    </section>
    <button @click="addMoney">add money</button>
    <section>
      <p>loading = {{ isLoading }}</p>
      <p>async data = {{ JSON.stringify(fetchData, null, 4) }}</p>
    </section>
    <button @click="fetch">fetch async data</button>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld";
// const log = console.log;

import { mapGetters, mapMutations, mapActions } from "vuex";

import log from "@/utils/log";

export default {
  name: "App",
  components: {
    // HelloWorld,
  },
  data() {
    return {
      num: 0,
      show: false,
    };
  },
  methods: {
    // 数组
    ...mapActions([
      "asyncAdd",
    ]),
    // Object 对象
    ...mapActions({
      asyncPlus: "asyncAdd",
    }),
    //  ...mapActions([
    //   'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    //   // `mapActions` 也支持载荷：
    //   'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    // ]),
    // ...mapActions({
    //   add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    // }),
    ...mapMutations([
      // keys, 数组
      "increment",
      // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      "addincome",
      // `mapMutations` 也支持载荷：
      // 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      // 重命名, 对象
      plus: "increment",
    }),
    add() {
      // this.$store.commit(`increment`);
      // this.increment();
      log(`plus ????`);
      this.plus();
    },
    fetch() {
      // this.$store.commit(`increment`);
      // this.increment();
      log(`fetch async data ????`);
      // this.asyncPlus();
      this.asyncPlus({
        datas: [1,2,3],
      });
    },
    addMoney() {
      // payload 负载
      // this.$store.commit(`addincome`, {
      //   salary: 100,
      // });
      // 对象风格
      log(`addincome 负载 ✅`);
      this.addincome({
        type: "addincome",
        salary: 100,
      });
      // this.$store.commit({
      //   type: "addincome",
      //   salary: 100,
      // });
    },
  },
  watch: {
    // 监听属性, watch props
    count: function () {
      // watch 计算属性 OK
      log(`watch count`);
      this.num = this.$store.state.count;
      // return this.$store.state.count;
    },
    // isLoading: function() {
    //   return this.$store.state.loading ? "✅" : "❌";
    // },
  },
  computed: {
    // 计算属性, computed attributes
    isLoading: function() {
      return this.$store.state.loading ? "✅" : "❌";
    },
    count: function () {
      log(`computed count`);
      return this.$store.state.count;
    },
    // 使用对象展开运算符将 getter 混入 computed 对象中
    // ✅ 参数是 数组
    ...mapGetters([
      "computedStoreCount",
      "loading",
      "fetchData",
      // ...
    ]),
    // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
    // ✅ 参数是 Object， 重命名
    ...mapGetters({
      doneCount: "doneStoreCount",
      receivedMoney: "receivedIncome",
    }),
  },
  mounted() {
    this.num = this.$store.state.count;
    // 分发 Action
    // this.$store.dispatch('increment');
    // 以载荷形式分发
    // this.$store.dispatch('incrementAsync', {
    //   amount: 10
    // });
    // 以对象形式分发
    // this.$store.dispatch({
    //   type: 'incrementAsync',
    //   amount: 10
    // });
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>