vue-cli学习-Module模块化入门

Module 设置

由于 state 使用的单一状态树，所有状态都集中在一个对象中，大了就很重；
Vuex 提供了 Module 模块化设置，可以将状态分割成一个个小的模块
在 store 目录下创建一个新的 js 文件：module/list.js，代码如下：

export default {
    namespaced:true,    //隔离主状态和模块状态名称冲突，需要设置一个命名空间

    state: {
        name: 'no name'
    },

    getters: {
        getName(state){
          return '['+state.name+']'
        }
    },

    mutations:{
        setName(state,value){
            state.name=value
        }
    },
    actions:{
        setName({commit}){
            setTimeout(()=>{
                commit('setName','huangyonggui')
            },1000)
        }
    }
}

在 store/index.js 中的 Module 引入这个模块

import list from "@/store/module/list";

  modules: {
    list
  }

编写一个List.vue测试

<template>
<div class="list">
  <h3>{{$store.state.list.name}}</h3>
  <h3>{{getName}}</h3>
  <h3>{{$store.state.name}}</h3>
  <button @click="setName">获取</button>
</div>
</template>

<script>
export default {
  name: "List",
  computed:{
    getName(state) {
      return this.$store.getters['list/getName'];
    }
  },
  methods:{
    setName(){
      // console.log(this.$store.state.name)
      this.$store.dispatch('list/setName')
    }
  }
}
</script>

<style scoped>

</style>