zoukankan      html  css  js  c++  java
  • Vuex 核心属性(下)

    Modules:可以定义新的模块

    官方上说,当我们的应用变的非常复杂时,store对象就有可能变得相当臃肿

    为了解决这个问题,Vuex允许我们将store分割成模块(Module),

    在这里,每个模块都拥有自己的state、mutations、actions、getters等

    写个例子吧:
    首先我们来声明一个module,起个名字就叫做moduleA吧

    const moduleA={ state:{}, mutations:{}, getters:{}, actions:{} } const store = new Vuex.Store({ state:{}, mutations:{}, actions:{}, getters:{}, modules:{ a:moduleA } })

    从上面的代码可以得知, const store = new Vuex.Store({})  是根(root)

    那么在const moduleA就是我们分离出去的模块了,下面我们在moduleA中的state写一条数据,看看它是如何被使用的

    const moduleA = {
      state:{
       name:"张三"
      }  
    }
    
    const store = new Vuex.Store({
      modules:{
        a:moduleA
       }
    })
    
    在组件页面引用时,如App.vue页面中引用时,
    
    <h1>{{$store.state.a.name}}</h1>

    可以看到,我们调用的还是根的state,但是我们定义的a:moduleA ,将我们在moduleA中的state以a的形式给添加到了根的state中去,

    所以我们要使用$store.state.a.name 来获取moduleA模块中state中的数据

    在moduleA这模块中的getter可以有三个参数:

    const moduleA = {
       getters:{
          fullName(state){
          //第一个参数:state==》指向当前模块中的state
          //返回内容是state中的name拼接上111
              return state.name + '111'
          },
       fullName2(state,getters){
    //第二个参数:getters====》可以引用该模块中的其他gettes方法
    //返回内容:先获取到fullName返回的内容再拼接上222
    return getters.fullName + '222'
    },
    fullName3(state,getters,rootState){
    //第三个参数rootState====>根上边的state
    //返回内容:先获取到fullName2返回的内容再拼接上 根上边的state中的count
    return getters.fullName2 + rootState.count
    }
    } }

    在moduleA这模块中的actions中的参数context(上下文)指向问题

    const moduleA = {
      actions:{
    aUpdName(context){ //context: 上下文的意思 setTimeout(()=>{ //参数'UpdName' 是mutations中的方法名,李四:是传递去的参数 context.commit('UpdName','李四') //这里的context.commit()方法只提交给当前模块中的mutations中去,也就是说模块里的context指向模块中的mutation },1000) } } }

     对象结构:可以将context解构为state、commit、rootState,如下面的例子

    const moduleA = {
      actions:{
    //state ===> 指向当前模块中的state; commit===> 提交给当前模块中的mutation ; rootState===> 根上边的state属性 aUpdName({state、commit、rootState}){ if((state.count + rootState.count) % 2 === 1){
          commit('updName') //updName 当前模块中的mutation
    } } } }

    至于在moduleA这个分离出来的模块中mutations的使用方法,跟分离前是一样的

  • 相关阅读:
    Pytorch学习(一)基础语法篇
    CSAPP深入理解计算机系统(第二版)第三章家庭作业答案
    理解DP(持续更新)
    LeetCode题解 | 215. 数组中的第K个最大元素
    快速排序
    浅谈设计模式(java)——从lol来看观察者模式
    <小虾米的android学习之旅1>Android框架
    程序员如何用技术变现?
    为了反击爬虫,前端工程师的脑洞可以有多大?
    如何成为一名爬虫工程师?(顺带提供工作机会)
  • 原文地址:https://www.cnblogs.com/a973692898/p/12849579.html
Copyright © 2011-2022 走看看