VUEX中的模块化modules开发

最新推荐文章于 2024-04-28 12:36:05 发布

一个前端女子

最新推荐文章于 2024-04-28 12:36:05 发布

阅读量386

点赞数 1

分类专栏： vue2 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44173499/article/details/123154264

版权

VUEX中的模块化modules开发

1.store 分割成模块（module）。每个模块拥有自己的 state、getter、mutation、action、甚至是嵌套子模块。

2.命名空间：

如果希望模块不是全局的（在写的项目的时候一般都会加上），你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块，此时的，state、getter、action 及 mutation 都是局部的。
当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
Vuex模块：开启命名空间模块开启命名空间后，享有独自的命名空间

eg:

Markup

const cartModule = {
namespaced:true,
state:{},
getters:{},
mutations:{},
actions:{}
}

在vue单页组件中使用 vuex数据仓库中的共享数据，获取数据的方法如下所示：

state:【this.$store.state.模块名.key】

getters:【this.$store.getters['模块名/key']】

mutations：【this.$store.commit('模块名/method')】

actions：【this.$store.dispatch('模块名/method')】

代码：

Markup

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/vuex.js"></script>
    <script src="./js/axios.js"></script>
</head>

<body>
    <div id="app">
        <list></list>
        <car-footer></car-footer>
    </div>
    <template id="list">
        <div>
            <!-- <p>我是list组件</p> -->

最低0.47元/天解锁文章

一个前端女子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VUEX中的模块化modules开发

VUEX中的模块化modules开发1.store 分割成模块（module）。每个模块拥有自己的 state、getter、mutation、action、甚至是嵌套子模块。2.命名空间：如果希望模块不是全局的（在写的项目的时候一般都会加上），你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块，此时的，state、getter、action 及 mutation 都是局部的。当模块被注册后，它的所有 getter、action 及 mutatio.
复制链接

扫一扫