vuex21.getters除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，

1. getters

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

定义getters

 getters: {    getList (state) {      return state.list.filter(item => item > 4)    }  }


使用getters原始方式 -$store<div>{{ $store.getters.filterList }}</div>

辅助函数 - mapGetters

computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>

2.核心概念 - 模块 module

(1)在store中新建一个文件夹modules ==user.js ==articles.js

还需要在store中index.js中引入

import user from '@/store/modules/user.js'

const store = new Vuex.Store({  // 配置严格模式  strict: process.env.NODE_ENV === 'development',  // 放置公共的数据  state: {  },  // 放mutations  mutations: {  },  // 放getters  getters: {  },  // modules  modules: {    user,    article  }})


const user = {  state: {    name: 'userName',    age: 10  },  mutations: {  },  actions: {  },  getters: {  }}export default user

(2)使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx

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

3.命名空间 namespaced

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，只有state是局部的数据

想保证内部模块的高封闭性，我们可以采用namespaced来进行设置

  // 是否开启模块的命名空间  // 如果是true，那么模块的state mutations actions getters都是私有的   namespaced: true

const user = {
  state: {    name: 'userName',    age: 10  },  mutations: {    changeUser (state, name) {      state.name = name    }  },  actions: {  },  getters: {  },  namespaced: true}export default user

（2）使用方法，提交模块中的mutation

全局的:   this.$store.commit('mutation函数名', 参数)

模块中的: this.$store.commit('模块名/mutation函数名', 参数)


例子：  this.$store.commit('user/changeUser', '000')

（3） namespaced: true 后, 要添加映射, 可以加上模块名, 找对应模块的state/mutations/actions/getters

computed: {
  // 全局的
  ...mapState(['count']),
  // 模块中的
  ...mapState('user', ['myMsg']),
},
methods: {
  // 全局的
  ...mapMutations(['addCount'])
  // 模块中的
  ...mapMutations('user', ['updateMsg'])
}