vuex使用map解构和模块化

 store文件结构

 index.js  使用模块化

import Vue from 'vue'
import Vuex from 'vuex'
import home from "./modules/home"
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    home
  }
})

modules/index.js 文件

export default {
    namespaced: true,
    state: { //基础数据
        num: 20
    },
    getters: { //保存受state影响的数据
        dblnum(state) {
            return state.num * 2
        }
    },
    mutations: { //同步修改
        add(state, payload) {
            state.num += payload
        }
    },
    actions: { //异步修改
        // asyncNum(context, payload) {
        //   setTimeout(() => {
        //     context.commit('add',payload)
        //   },1000)
        // },
        // 解构
        asyncNum({
            commit
        }, payload) {
            setTimeout(() => {
                commit('add', payload)
            }, 1000)
        }
    },
}

内容

<template>
  <div class="container">
    {{ num }}
    <br />
    {{ dblnum }}
    <br />
    <button @click="add(10)">增加</button>
    <br />
    <button @click="asyncNum(10)">一秒之后增加</button>
  </div>
</template>

js

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  computed: {
    // 基础数据
    ...mapState({
      num: (state) => state.home.num,
    }),
    // 响应数据
    ...mapGetters({
      dblnum: "home/dblnum",
    }),
  },
  methods: {
    // 同步
    ...mapMutations({
      add: "home/add",
    }),
    // 异步
    ...mapActions({
      asyncNum: "home/asyncNum",
    }),
  },
};
</script>