vue vuex module mapActions

新建vue项目

 main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  store
}).$mount('#app');

app.vue

<template>
  <div id="app">
    <h1>vuex modules</h1>
    <base-a></base-a>
    <base-b></base-b>
  </div>
</template>

<script>
import BaseA from "@/components/BaseA";
import BaseB from "@/components/BaseB";

export default {
  name: 'App',
  components: {
    BaseA,
    BaseB
  },
  created() {
    console.log(this.$store);
  }
}
</script>

<style>

</style>

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from "@/store/modules/user";
import setting from "@/store/modules/setting";

Vue.use(Vuex);

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
});

export default store

user.js

//user模块
const state = {
    userInfo: {
        name:'zhang',
        age:18
    },
    score:80
};
const mutations = {
    setUser(state,newUserInfo){
        state.userInfo = newUserInfo;
    }
};
const actions = {
    setUserSecond(context,newUserInfo){
        //将异步在actions中封装
        setTimeout( ()=>{
            //一秒后调用mutation, context上下文，默认提交自己的模块的
            context.commit('setUser',newUserInfo);
        },1000)
    }
};
const getters = {
    //分模块后，state指代子模块的state
    /**
     * @return {string}
     */
    UpperCaseName(state){
        return state.userInfo.name.toUpperCase()
    }
};

export default {
    //开启命名空间
    namespaced:true,
    state,
    mutations,
    actions,
    getters
}

//使用模块中的数据
//1 直接通过模块名访问 $store.state.模块名.xxx
//2 通过 mapState映射
//  默认根级别的映射 mapState(['xxx])
//  子模块的映射 mapState('模块名'，['xxx'])

setting.js

//setting模块
const state = {
    theme:'light',
    desc:'测试demo'
};
const mutations = {
    setTheme(state,newTheme) {
        state.theme = newTheme;
    }
};
const actions = {};
const getters = {};

export default {
    //开启命名空间
    namespaced:true,
    state,
    mutations,
    actions,
    getters
}

BaseA.vue

<template>
    <div class="base-a">
        <!-- 通过原生的方式       -->
        <div>{{ $store.state.user.userInfo.name }}</div>
        <button @click="updateUser">更新个人信息</button>
        <div>{{ $store.state.setting.theme }}</div>
        <button @click="updateTheme">更新主题</button>
        <hr>
        <!--  测试访问模块中的getters 原生写法      -->
        <div>{{ $store.getters['user/UpperCaseName'] }}</div>
        <button @click="updateUser2">一秒后更新信息</button>
    </div>
</template>

<script>
    export default {
        name: "BaseA",
        methods:{
            updateUser(){
                this.$store.commit('user/setUser',{
                    name:'wang',
                    age:33
                });
            },
            updateTheme(){
                this.$store.commit('setting/setTheme','black');
            },
            updateUser2(){
                this.$store.dispatch('user/setUserSecond',{
                    name:'zhou',
                    age:44
                });
            }
        }
    }
</script>

<style scoped>
    .base-a{
        width: 50%;
        height: 200px;
        border: 2px solid #333333;
    }
</style>

BaseB.vue

<template>
    <div class="base-b">
        <!-- 通过map等方式       -->
        <div>{{ user.userInfo }}</div>
        <div>{{ setting.theme }}</div>
        <div>user模块的数据：{{ userInfo.name }}</div>
        <button @click="setUser({name:'zhao',age:88})">更新个人信息</button>
        <button @click="setUserSecond({name:'wu',age:22})">一秒后更新信息</button>
        <div>setting模块的数据：{{ theme }}--{{ desc }}</div>
        <button @click="setTheme('skyblue')">更新主题</button>
        <hr>
        <!--  访问模块中的getters      -->
        <div>{{ UpperCaseName }}</div>

    </div>
</template>

<script>
    import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
    export default {
        name: "BaseB",
        computed:{
            ...mapState(['user','setting']),
            ...mapState('user',['userInfo','score']),
            ...mapState('setting',['theme','desc']),
            ...mapGetters('user',['UpperCaseName'])
        },
        methods:{
            ...mapMutations('user',['setUser']),
            ...mapMutations('setting',['setTheme']),
            ...mapActions('user',['setUserSecond'])
        }
    }
</script>

<style scoped>
    .base-b{
        width: 50%;
        height: 200px;
        border: 2px solid #333333;
        margin-top: 30px;
    }
</style>