美文网首页
Vuex学习(二)--模块modules及获取根部数据或方法

Vuex学习(二)--模块modules及获取根部数据或方法

作者: 了彧 | 来源:发表于2018-11-29 15:57 被阅读0次

    1.使用modules的目的:

    由于使用单一的状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂,store对象就会变得非常臃肿;为了解决这个问题,Vuex允许我们将store分隔成模块(module),每个模块拥有自己的state,mutation,action,getter,甚至是嵌套子模块

    2.具体写法:

    (1)在store中新建一个模块文件

    modulesA.js(随意起名即可)

    (2)在store中的出口文件中引入模块

    index.js

    (3)模块中的getters参数及其可取到的值

        ①state:获取modules中的state数据

        ②getters:获取modules中的getters数据

        ③rootState:获取根部state数据

        ④rootGetters:获取根部getters数据

    modules中的getters

    (4)模块中的mutations参数及其可取到的值

        ①state:获取modules中的state数据

        ②getters:获取modules中的getters数据

        ③调用方法时传入的值

    (5)模块中的actions参数及其可取到的值

        ①commit:获取根部mutations

        ②dispatch:获取根部actions

        ③rootState:获取根部state,rootState.数据名称

        ④rootGetters:获取根部getters,rootState.数据名称

        ⑤state:获取modules中的getters

        ⑥getters:获取modules中的getters

    modules中的actions

    (6)modules中的子模块

    名为modoleChild的子模块

    3.组件中获取数据及方法的写法

    (1)获取模块中state的数据

    (2)获取模块中getters的数据

    (3)获取模块中mutations或actions的方法

    相关文章

      网友评论

          本文标题:Vuex学习(二)--模块modules及获取根部数据或方法

          本文链接:https://www.haomeiwen.com/subject/zvxnqqtx.html