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 /> <! < span style =" box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 13px! Important; word-break: inherit! Important;" </template> <script> import { mapState, mapGetters, mapMutations, mapActions } from "vuex"; Export default {name: "App", components: {}, // Actionss & mapActions MapActions (["incrementCountAsync", "decrementCountAsync", "fetchTodos",]), 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 / / array form the methods: mapMutations ([" incrementCount ", "decrementCount"]), / / the object forms the methods: MapMutations ({incrementCount: "incrementCount", decrementCount: "decrementCount",}), decrementCount; { incrementCount() { this.$store.commit("incrementCount"); }, decrementCount(n) { this.$store.commit("decrementCount", n); },}, // computed getters & mapGetters MapGetters (["count", "todos", "todosCount", "getTodoById"]), // Object form 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; },}, // computed: mapState(["count", "todos"]); // Object computed: mapState({"count", "todos"]); (state) => state.count, todos: (state) => state.todos,}), { count() { return this.$store.state.count; }, todos() { return this.$store.state.todos; ,}}}; </script> <style> </style>Copy the code

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
  }
})

Copy the code

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
}
Copy the code

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 }Copy the code

—End—