vuex全家桶系列03-vuex的模块化

1.vuex的模块化-modules

由于使⽤单⼀状态树，应⽤的所有状态会集中到⼀个⽐较⼤的对象。当应⽤变得⾮常复杂时， store 对象就有可能变得相当臃肿。为了解决以上问题， Vuex 允许我们将 store 分割成模块（ module） 。每个模块拥有⾃⼰的 state、 mutation、 action、getter、甚⾄是嵌套⼦模块——从上⾄下进⾏同样⽅式的分割：

这里先走个小例子，让数据流通，下一篇会个改写成购物车的案例：

1.1首先是 store 中的 index 文件:

• 新建了一个 modules 属性，然后将 store 文件夹下 modlues 的模块化文件引入

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

Vue.use(Vuex)

import test from"./modules/test";

export default new Vuex.Store({
  state: {
    count:5201314,
    name:"linlin"
  },
  //🍊这里是重点--
  modules: {
    test
  }
})

1.2 创建 store 中 modules 目录，并创建模块化文件(这里是test.js)

• 模块具有更高的 封装度 和 复用性 ，可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

export default {
  //🍊这个不要忘记写了
    namespaced:true,
    state:{
        loveher:"郭琳琳是我最喜欢的姑娘啊",
        test:"就是想测试下好不好用"
    },
    getters:{
        loveherya(state){
            return state.loveher
        },
        testone(state){
            return state.test
        }
    },
    mutations:{

    },
    actions:{

    }
}

1.3 在组件Mylover中使用模块化

• mapGetters 和 mapState 的用法:
  • 第 1 个参数是 模块名，第2个参数是属性组成的 数组 或者 对象
• 然后挂载 Mylover.vue 组件就可以在页面上看到渲染的值了

//components/Mylover.vue
<template>
<div>
    我是产品列表页面
    <br>
    <p>这个就是我喜欢的女孩子{{loveherya}}</p>
    <p>{{test}}</p>
</div>
</template>

<script>
import {
    mapGetters,
    mapState
} from "vuex"
export default {
    computed: {
      //这里面需要注意mapGetters和mapState的用法
        ...mapGetters("test", ["loveherya"]),
        ...mapState("test", ["test"])
    },
}
</script>

<style lang="scss" scoped>

</style>