05-Vuex基础--modules

前言：

如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

由此有了Vuex的模块化---modules,其目的就是为了模块化Vuex中的成员，使得Vuex维护起来相对容易些。

简单的模块化应用

• 定义两个模块 user和 List

user中管理用户的状态 token

List中管理 应用的名称 name

const store  = new Vuex.Store({
    // user模块
    user: {
      state: {
        token:'token'
      }
    },
    // List模块
    List: {
      state: {
        name: '123'
      }
    }
  })

调用方式1：

$store.state.模块名称.属性名

<div>token={{$store.state.user.token}}</div>
    <div>name={{$store.state.List.name}}</div>

调用方式2：

  getters: {
    token:state=>state.user.token
    name:state=>state.List.name
  },

组件中引用mapGetters:

import {mapGetters} from 'vuex'

通过mapGetters映射到computed属性中

  computed: {
    ...mapGetters(['token','name'])
  },

使用

  <div>{{token}}</div>
    <div>{{name}}</div>