68. VUEX 认识Module

Vue使用单一状态树,那么也意味着很多状态都会交给 Vuex来管理.
当应用变得非常复杂时,store对象就有可能变得相当臃肿

为了解决这个问题, Vuex允许我们将store分割成模块 (Module), 而每个模块拥有自己的state、mutation、 action、getters等

当然这种写法肯定是比较清晰的：

如果下图这样的代码 怎么访问模块a的name?  

 那么我们在App.vue中访问看看：

 

 我们没在state中定义a ，怎么会有a呢，其实它是把moudle中的a对象，放在state中，然后你就可以获取了，可以看调试：

 我们没在state定义任何东西，他却有个a，所以这就是moudle。

---

---

moudule中Mutations的使用【修改state的值 和 传参】

其实也一样 在最外层直接获取，，下面代码演示修改木块a中state中的name为 'lisi'  ：

【其实和普通的传参和修改一样直接commit】

<template>
  <div id="app">
    <p>A模块中的 name ：  {{$store.state.a.name}}</p>
    <button @click="updateName">修改name 为 lisi</button>
  </div>
</template>
  

<script>
export default {
    methods:{
      updateName(){
        this.$store.commit('updateName','lisi')    //传参给模块a中Mutations，，，，这个直接commit即可 没改变
      }
    }
  }
  
</script>


<style scoped>

</style>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)   

const moudleA = {
    state:{
        name:"BiHu"   
    },
    mutations:{
        updateName(state,payload){
            state.name = payload            //payload是外部参数
        }
    }
}

const myVuex = new Vuex.Store({
    state:{
        
    },
    modules:{
        a:moudleA
    }
});


export default myVuex   //导出VUX对象

---

---

moudule中Getters的使用

模块中的getters和普通的getters有一个区别，就是 模块中的getters 有三个参数，比普通的多1个：

下面演示在name的基础上 加点字符串

<template>
  <div id="app">
    <p>加了字符串后的 name（BiHu） ：  {{$store.getters.updateName}}</p>

  </div>
</template>
  
<script>
export default {
    methods:{
      
    }
}
  
</script>


<style scoped>

</style>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)   

const moudleA = {
    state:{
        name:"BiHu"   
    },
    getters:{
        updateName(state,getters,rootState){
            //三个参数 一个是本身的state，二个是本身自己，三个是根store的state对象，这样可以调用state中的东西
            console.log(rootState);
            return state.name + " | 被添加的字符串（根store中的state中的name）： " + rootState.name
        }
    }
}

const myVuex = new Vuex.Store({
    state:{
        name:"state中的字符串name"
    },
    modules:{
        a:moudleA
    } 
});


export default myVuex   //导出VUX对象

所以可以看到 主要是模块中的getters第三个参数是 根store的state对象，这样就可以随时去获取根state中的值了

---

---

moudule中action的使用

它里面的action也是一样用来异步操作的，但是呢，模块里的action和普通的不一样，其主要区别就是在于 函数里的上下文，，，，，普通actions函数里的contex和router差不多，但模块里的 上下文

它的作用域只有 本模块 相当代表本模块而已，，，我们可以打印看看，它里面也是一样的stata mutations 等。。。

　　

可以看到不同了吧 连rootGetters和rootState的都有....

代码如下：

<template>
  <div id="app">
    <p>Name:{{$store.state.a.name}}</p>
    <button @click="getName">异步获取Name</button>
  </div>
</template>
  
<script>
export default {
    methods:{
      getName(){
        this.$store.dispatch('getName');  //异步老方法
      }
    }
}
  
</script>


<style scoped>

</style>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)   

const moudleA = {
    state:{
        name:""
    },
    mutations:{
        getName(state,payload){
            state.name = payload     //这里获取（修改）名字
        }
    },
    actions:{
        getName(context){
            console.log(context);   //打印一下context看看即可
            setTimeout(() => {
                context.commit("getName","BiHu")       //Commit提交给mutations
            }, 1000);//开始异步操作
        }
    }
}

const myVuex = new Vuex.Store({ 
    state:{
        name:"state中的字符串name"
    },
    modules:{
        a:moudleA
    } 
});


export default myVuex   //导出VUX对象

完、