一、前言

我们以uniapp为例进行讲解，具体类型项目需自行参考实现

二、安装

vuex官网：vuex.vuejs.org/zh/

• npm

npm install vuex@next --save

• yarn

yarn add vuex@next --save

三、创建vuex的store文件

index.js 创建vuex状态管理

import {createStore} from 'vuex'
import a from './modules/a.js'
const store=createStore({
    state(){
        return {
            count1:0
        }
    },
    mutations:{
    
    },
    //引入vuex模块，分模块管理数据
    modules:{
        a  //引用模块a
    }
})
export default store

modules文件夹 存放vuex模块

• 模块a

export default{
    namespaced:true, //开启命名空间
    state:()=>({
    count2:0
    }),
    mutations: {

	},
    actions: {

	},
    getters: {

	}
}

四、store文件挂载全局

• mian.js

import store from './store/index.js'
import {createSSRApp} from 'vue'
export function createApp() {
    const app = createSSRApp(App)
    app.use(store)
    return {
        app
    }
}

五、vuex的使用

state数据使用

• $store.state.a.count2

• mapState获取

1. 新建hooks文件，创建useStore.js

import {computed} from 'vue'
import {mapState,mapMutations,useStore} from 'vuex'
export function useState(mapper, modules) { //modules:引用模块 mapper：传入的数组或者对象
    const store = useStore() // 获取state对象
    let stateFns = null
    if (modules != undefined) {
        stateFns = mapState(modules, mapper)
    } else {
        stateFns = mapState(mapper)
    }
    const stateMaps = {}
    Object.keys(stateFns).forEach((key) => { //遍历数组或者对象，加入计算属性
        // 计算属性接收一个方法，mapState()返回的就是一个键值对，值就是方法
        stateMaps[key] = computed(stateFns[key].bind({
            $store: store
        }))
    })
    return stateMaps
}

export function useMutations(mapper, modules) { //modules:引用模块 mapper：传入的数组或者对象
    const store = useStore() // 获取state对象
    let mutationsFns = null
    if (modules != undefined) {
        mutationsFns = mapMutations(modules, mapper)
    } else {
        mutationsFns = mapMutations(mapper)
    }
    const mutationsMaps = {}
    Object.keys(mutationsFns).forEach((key) => { //遍历数组或者对象，加入计算属性
        // 计算属性接收一个方法，mapMutations()返回的就是一个键值对，值就是方法
        mutationsMaps[key] = mutationsFns[key].bind({
            $store: store
        })
    })
    return mutationsMaps
}

2. 页面引用

import {toRefs} from 'vue'
import {useState} from '@/hooks/useStore.js'
setup(){
    const storeState1 = useState(['count2'],'a')  //模块a的count
    const storeState2 = useState('count1')  //vuex的count
    return{
        ...toRefs(storeState)
    }
}

//方式1  
{{count2}}

//方式2
{{$store.state.a.count2}}