在vue3中使用vuex 4.x

最近准备在项目中使用vue3.0,顺便把vuex（目前是^4.0）也升级到最新版本了;

1. 首先通过命令新建脚手架，在src目录下新建store文件夹。并创建index.js入口和modules文件夹（因为我把模块拆分了）
   

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

3. 接下来在index.js里面导入vuex相关api和自己定义的模块

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

//因为我把模块拆分了，但是我又不想每次都导入，就通过这个自动导入modules目录下的模块
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
})

4. 接下来是在main.js中导入（这里我还用到了element+）
   

5. 最后是在compositionAPI中使用了

可以像原来那样通过mapState等剩余函数获取。也可以通过新的api；

第一种方式

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); // 这里注意指定user模块
        return {
            name,
            setToken: () => store.commit('user/SET_TOKEN', new Date().getTime() / 1000),
                                    // 这里注意指定user模块
        }
    },

}

应该还有很多其他方式的，以后再补充。

转载： https://blog.csdn.net/weixin_43564110/article/details/111566345