在vue3中使用vuex 4.x

àì夳堔傛蜴生んèń 2022-09-04 02:54 97阅读 0赞

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

1.  首先通过命令新建脚手架，在src目录下新建store文件夹。并创建index.js入口和modules文件夹（`因为我把模块拆分了`）  
    ![在这里插入图片描述][i_20201222203643375.png]
2.  user.js文件，一个独立的模块  
    ![在这里插入图片描述][i_20201222204010791.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU2NDExMA_size_16_color_FFFFFF_t_70]
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  
exportdefault createStore(\{    
getters,  
modules  
\})

1.  接下来是在main.js中导入（这里我还用到了element+）  
    ![在这里插入图片描述][i_20201222204438373.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU2NDExMA_size_16_color_FFFFFF_t_70]
2.  最后是在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了
 })
 },
 }</code></pre>

`第二种方式`

// 导入相关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模块
 }
 },
 
 }</code></pre>

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

转载： https://blog.csdn.net/weixin\_43564110/article/details/111566345

[i_20201222203643375.png]: /images/20220829/3bf42cbca0684795b377bad4753d9dec.png
[i_20201222204010791.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU2NDExMA_size_16_color_FFFFFF_t_70]: /images/20220829/0f512b478aaf4f75a48133f304978108.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU2NDExMA==,size_16,color_FFFFFF,t_70
[i_20201222204438373.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU2NDExMA_size_16_color_FFFFFF_t_70]: /images/20220829/3d2ab806ce8045cbb8ce7efc065c9b60.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU2NDExMA==,size_16,color_FFFFFF,t_70