Vue——vue3中vuex模块化管理（一般写法、命名空间写法、辅助函数写法）

src\store\index.js 配置文件： 引入user模块

import { createStore } from 'vuex'
import user from './user'
export default createStore({
  // 设置全局数据
  state: {
   
  },
  // 计算属性
  getters: {
   
  },
  // 修改状态方法(同步)
  mutations: {
    
  },
  // 修改状态方法(异步)
  actions: {
    
  },
  modules: {
    user
  }
})

src\store\user.js 配置文件

const user = {
    // 命名空间写法这个一定要加上，非常重要
    namespaced: true,
    state: () => ({
        username: 'abc',
        age: 10
    }),
    mutations: {
        setUserName (state) {
            state.username = 'ddd'
        },
        setAge (state, value) {
            state.age = value
        }
    },
    actions: {
        asyncSetAge (context, value = 50) {
            console.log(context, 'context');
            setTimeout(() => {
                context.commit('setAge', value)
            }, 200);
        }
    },
    getters: {
        descrption (state, getters, rootState) {
            return state.username + '年龄是' + state.age + '岁'

        }
    }
}

export default user

一般写法：

demo.vue文件

<template>
    <h1>用户名:{{$store.state.user.username}}</h1>
    <h1>描述:{{$store.getters.descrption}}</h1>
    <button @click="changeAge">异步修改年龄</button>
</template>

<script>

export default {

    mounted () {
        console.log(this.$store);
    },
    methods: {
        changeAge () {
             this.$store.dispatch('asyncSetAge')
           
        },

    }
}
</script>

命名空间写法

demo.vue文件

<template>
      <!-- 命名空间的写法 -->
    <h1>用户名:{{$store.state.user.username}}</h1>
    <h1>描述:{{$store.getters['user/descrption']}}</h1>
    <button @click="changeAge">异步修改年龄</button>

</template>

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    computed: {
        ...mapState(['user']),
        ...mapGetters('user', ['descrption'])
    },
    mounted () {
        console.log(this.$store);
    },
    methods: {
        changeAge () {
            // 命名空间写法
            this.$store.dispatch('user/asyncSetAge')
        },
    }
}
</script>

辅助函数写法

demo.vue文件

<template>
    <!-- 辅助函数的写法 -->
    <h1>用户名:{{user.username}}</h1>
    <h1>描述:{{descrption}}</h1>
    <button @click="asyncSetAge(100)">异步修改年龄100</button>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    computed: {
        ...mapState(['user']),
        ...mapGetters('user', ['descrption'])
    },
    mounted () {
        console.log(this.$store);
    },
    methods: {
       
        // 辅助函数的写法
        ...mapActions('user', ['asyncSetAge'])
    }
}
</script>