在vue3中使用vuex 4.x

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

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

2. user.js文件，一个独立的模块
   
   getters内容不多，根据自己的业务来
   

3. 接下来在index.js里面导入vuex相关api和自己定义的模块，注意：vite下没法使用

// 这里跟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
})

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模块
            }
        },

    }

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