vue3.x中的 Vuex(状态管理工具)

前言

Vue3在2月份已经变成默认版本了，接下来的vue3将会成为主流的框架。
我们来看看vue3中的奇妙世界吧

vuex

Vuex 是一个专为 Vue.js 的状态管理工具，可以解决组件之间数据共享的问题。

注意：我们在项目中如果使用到vuex，最好通过dispatch触发actions的事件 ---> 在actions里通过commit触发mutation ---> 改变state的状态

在vue3.x中如何使用vuex

vue2.x和vue3.x最大的区别就是 vue3.x中使用的是Composition API

import { useStore } from 'vuex'
export default {
	setup() {
		const store = useStore()
	}
}

在store/index.js文件：

import { createStore } from "vuex";
export default createStore({
    state() {
        return {
            num:1
        }
    },
    mutations:{
        addNum(state) {
            state.num++
        }
    },
    actions:{
    	// change(context)
    	// context是一个关联vuex上下文的实例
        change({commit}) {
            commit('addNum')
        }   
    },
    getters:{
    	// gAge(state, getters)
    	// state 	全部的数据状态
    	// getters  全部的计算属性
        gAge() {
            return 18
        }
    },
    modules:{}
})

访问 state

import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
    setup() {
        const store = useStore()
        const num = computed(()=>store.state.num)
        return {
            num
        }
    }
};

访问 getters

import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
    setup() {
        const store = useStore()
        const age = computed(()=>store.getters.gAge)
        return {
            age
        }
    }
};

访问 mutations

import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
    setup() {
        const store = useStore()
        const add = ()=>{
        	store.commit('addNum')
        }
        return {
            add
        }
    }
};

访问 actions

import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
    setup() {
        const store = useStore()
        const add = ()=>{
        	store.dispatch('change')
        }
        return {
            add
        }
    }
};

使用辅助函数

mapState
默认的情况下，vuex并没有提供非常方便使用mapState的方式，这里我们进行一个函数的封装：

import { useStore,mapState } from 'vuex'
import { computed } from 'vue'
export default {
    setup() {
        const store = useStore()
        const storeStateFns = mapState(["num","age","name"])
        // 相当于
        // {
        //     num(){ return this.$store.state.num},
        //     age(){ return this.$store.state.age},
        //     name(){ return this.$store.state.name},
        // }        
        const storeState = {}
        Object.keys(storeStateFns).forEach(key=>{
        	// 使用bind修改this的指向，this.$store相当于
        	// store(我们实例化出来的const store = useStore())
        	
        	// 我们也不能使用call和apply修改this，因为我们要确保fn是一个函数
            const fn = storeStateFns[key].bind({$store:store})
            storeState[key] = computed(fn)
        })
        return {
            ...storeState
        }
    }
};

mapGetters
与mapState使用方法一样

mapMutations

<template>
    <div class=''>
        {{num}}
        <button @click="add">点击吧</button>
    </div>
</template>

<script>
import { useStore,mapMutations } from 'vuex'
import { computed } from 'vue'
export default {
    setup() {
        const store = useStore()
        const num = computed(()=>store.state.num)
        const storeMutations = mapMutations({"add":"addNum"})

        return {
            ...storeMutations,
            num
        }
    }
};
</script>

对于模块划分可以看我的另一篇博客 <(￣︶￣)↗[GO!]