vuex 引用的三种写法

mapState，mapGetter，mapMutations，mapActios
引用的各种写法

App.vue

<template>
  <div id="app">
    <p>{{ count }}</p>
    <p>{{ todos }}</p>
    <p>{{ todosCount }}</p>
    <p>{{ getTodoById(2) }}</p>

    <!-- mutations -->
    <button @click="decrementCount(1)">-</button>
    <br />
    <span>{{ count }}</span>
    <br />
    <button @click="incrementCount">+</button>

    <br />
    <br />
    <!-- fetchTodos -->
    <div>{{ todos }}</div>
    <br />
    <br />
    <button @click="fetchTodos">拉取fetchTodos</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "App",
  components: {},

  // actionss & mapActions
  // 数组形式
  methods: mapActions([
    "incrementCountAsync",
    "decrementCountAsync",
    "fetchTodos",
  ]),
  
  // 对象展开形式
  methods: mapActions({
    incrementCount: "incrementCountAsync",
    decrementCount: "decrementCountAsync",
    fetchTodos: "fetchTodos",
  }),
  
  // 函数调用形式
  methods: {
    incrementCount() {
      this.$store.dispatch("incrementCountAsync");
    },
    decrementCount(n) {
      this.$store.dispatch("decrementCountAsync", n);
    },
    fetchTodos() {
      this.$store.dispatch("fetchTodos");
    },
  },

  // mutations & mapMutations
  // 数组形式
  methods: mapMutations(["incrementCount", "decrementCount"]),
  // 对象形式
  methods: mapMutations({
    incrementCount: "incrementCount",
    decrementCount: "decrementCount",
  }),
  // 函数调用形式
  methods: {
    incrementCount() {
      this.$store.commit("incrementCount");
    },
    decrementCount(n) {
      this.$store.commit("decrementCount", n);
    },
  },

  // getters & mapGetters
  // 数组形式
  computed: mapGetters(["count", "todos", "todosCount", "getTodoById"]),
  // 对象形式
  computed: mapGetters({
    count: "count",
    todos: "todos",
    todosCount: "todosCount",
    getTodoById: "getTodoById",
  }),
  // 函数调用形式
  computed: {
    count() {
      return this.$store.getters.count;
    },
    todos() {
      return this.$store.getters.todos;
    },
    todosCount() {
      return this.$store.getters.todosCount;
    },
    getTodoById() {
      return this.$store.getters.getTodoById;
    },
  },

  // state & mapState
  // 数组形式
  computed: mapState(["count", "todos"]),
  // 对象形式
  computed: mapState({
    count: (state) => state.count,
    todos: (state) => state.todos,
  }),
  // 函数调用形式
  computed: {
    count() {
      return this.$store.state.count;
    },
    todos() {
      return this.$store.state.todos;
    },
  },
};
</script>

<style>
</style>

store/index.vue

import Vue from 'vue'
import Vuex from 'vuex'
import count from './modules/count'
import todos from './modules/todos'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    count,
    todos
  }
})

store/modules/count.js

const state = {
    count: 1,
};

const getters = {
    count: state => state.count,
}

const mutations = {
    incrementCount(state) {
        state.count++;
    },
    decrementCount(state, n) {
        state.count -= n
    },
}

const actions = {
    incrementCountAsync({ commit }) {
        setTimeout(() => {
            commit("incrementCount")
        }, 2000);
    },
    decrementCountAsync({ commit }, n) {
        setTimeout(() => {
            commit("decrementCount", n)
        }, 1000)
    },
}

export default {
    state,
    getters,
    mutations,
    actions
}

store/modules/todos.js

const state = {
    todos: [
        {
            id: 1,
            title: "todo item 1",
            completed: false
        },
        {
            id: 2,
            title: "todo item 2",
            completed: false
        },
        {
            id: 3,
            title: "todo item 3",
            completed: false
        },
    ]
};

const getters = {
    todos: state => state.todos.filter(item => !item.completed),
    todosCount: state => state.todos.length,
    getTodoById: state => id => state.todos.find(item => item.id === id)
}

const mutations = {
    setTodos: (state, todos) => state.todos = todos
}

const actions = {
    async fetchTodos({ commit }) {
        const res = await axios.get('http://jsonplaceholder.typicode.com/todos?_limit=10');
        commit('setTodos', res.data)
    },
}

export default {
    state,
    getters,
    mutations,
    actions
}

---End---