在vue3中使用vuex 4.x

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

首先通过命令新建脚手架，在src目录下新建store文件夹。并创建index.js入口和modules文件夹（因为我把模块拆分了）
user.js文件，一个独立的模块
接下来在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
})

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

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

第一种方式

import {
    
    createNamespacedHelpers, useStore} from 'vuex'
const {
    
    mapState, mapActions} = createNamespacedHelpers('user');// 通过这个函数来辅助我们找到user模块
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">default</span><span class="pln"> </span><span class="pun">{</span><!---ecms  --><span class="pln">
    name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Home'</span><span class="pun">,</span><span class="pln">
    components</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><!---ecms  --><span class="pun">},</span><span class="pln">
    computed</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><!---ecms  --><span class="pln">
        </span><span class="pun">...</span><span class="pln">mapState</span><span class="pun">({</span><!---ecms  --><span class="pln">
            token</span><span class="pun">:</span><span class="pln"> state </span><span class="pun">=&gt;</span><span class="pln"> state</span><span class="pun">.</span><span class="pln">token</span><span class="pun">,</span><span class="pln"> </span><span class="com">//指定模块后，这里默认就是获取user下面的state了</span><span class="pln">
        </span><span class="pun">})</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
</span><span class="pun">}</span></code></pre>

第二种方式

    // 导入相关api
    import {
    
    computed} from 'vue';
    import {
    
    useStore} from 'vuex';
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">default</span><span class="pln"> </span><span class="pun">{</span><!---ecms  --><span class="pln">
    name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Home'</span><span class="pun">,</span><span class="pln">
    setup</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><!---ecms  --><span class="pln">
        </span><span class="kwd">const</span><span class="pln"> store </span><span class="pun">=</span><span class="pln"> useStore</span><span class="pun">();</span><span class="pln">
        </span><span class="kwd">let</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> computed</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> store</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">user</span><span class="pun">.</span><span class="pln">name</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 这里注意指定user模块</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span><!---ecms  --><span class="pln">
            name</span><span class="pun">,</span><span class="pln">
            setToken</span><span class="pun">:</span><span class="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> store</span><span class="pun">.</span><span class="pln">commit</span><span class="pun">(</span><span class="str">'user/SET_TOKEN'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">().</span><span class="pln">getTime</span><span class="pun">()</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">),</span><span class="pln">
                                    </span><span class="com">// 这里注意指定user模块</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">

</span><span class="pun">}</span></code></pre>

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

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

在vue3中使用vuex 4.x

猜你喜欢