VUEX中的模块化modules开发

最新推荐文章于 2024-07-02 15:49:16 发布

一个前端女子

最新推荐文章于 2024-07-02 15:49:16 发布

阅读量399

点赞数 1

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

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

版权

本文介绍了如何在Vuex中进行模块化的modules开发，包括每个模块拥有独立的state、getter、mutation和action。通过设置namespaced为true，模块可以启用命名空间，确保操作的局部性。在Vue组件中，访问这些模块的数据和方法需要指定模块名和相应的key。例如，访问state使用`this.$store.state.模块名.key`，getters用`this.$store.getters['模块名/key']`，提交mutation用`this.$store.commit('模块名/method')`，调用action则为`this.$store.dispatch('模块名/method')`。

摘要由CSDN通过智能技术生成

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> -->