vue3中使用vuex 4.x

1、首先通过命令新建脚手架，在src目录下新建store文件夹。并创建index.js入口和modules文件夹（

image.png

2、user.js文件，一个独立的模块

const state = {
    user:{}
}
const mutations = {
    SET_USER:(state,user)=>{
        state.user = user;
    }
}
const actions = {

}

export default{
    state,
    mutations,
    actions
}

3、getters配置

const getters = {
    user: state => state.user
}
export default getters

4、在index.js里面导入vuex相关api

// 这里跟vue2有点区别，vue2中是直接导入vue，然后通过vue.use(xxx)
import { createStore } from 'vuex'
import getters from './getters'

//我把模块拆分了，不想每次都导入，通过这个自动导入modules目录下的模块
const modulesFiles = require.context('./modules', true, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

// 调用createStore
export default createStore({
  getters,
  modules
})

5、在main.js中导入

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App);
app.use(store);
app.mount('#app')

6、最后是在compositionAPI中使用
第一种

import {createNamespacedHelpers, useStore} from 'vuex'
const {mapState, mapActions} = createNamespacedHelpers('user');// 通过这个函数来辅助我们找到user模块
    export default {
        name: 'Home',
        components: {},
        computed: {
            ...mapState({
                token: state => state.token, //指定模块后，这里默认就是获取user下面的state了
            })
        },
    }

第二种方式

 // 导入相关api
    import {computed} from 'vue';
    import {useStore} from 'vuex';

    export default {
        name: 'Home',
        setup() {
            const store = useStore();
            let name = computed(() => store.state.user.name);
            return {
                name,
                setToken: () => store.commit('user/SET_TOKEN', new Date().getTime() / 1000),
            }
        },

    }