認識vuex中的modules

本文參考文獻

store/modules/user.js
export default{
    // 通過添加namespaced将actions,mutations,getters限定在子產品命名空間中
    // 當所有的actions, mutations, getters 都被限定到子產品的命名空間下，我們dispatch actions, commit mutations 都需要用到命名空間。
    // dispacth("changeName"),  就要變成 dispatch("login/changeName"); getters.localJobTitle 就要變成 getters["login/localJobTitle"]
    namespaced:true,
    state:{
        userName:'obama',
    },
    getters:{
        // 通過rootState,rootGetters來擷取根store中的state和getters
        allName(state,getters,rootState,rootGetters){
            return state.userName + rootState.secondName;
        }
    },
    actions:{

    },
    mutations:{
        changeName(state,newName){
            state.userName = newName;
        },
    }
}
           

store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 引入user 子產品
import user from './modules/user';
export default new Vuex.Store({
    state:{
        secondName:'LI'
    },
    mutations:{

    },
    getters:{

    },
    actions:{

    },
    // 通過modules引入到store中
    modules:{
        user
    }
})
           

HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 從modules--user中擷取到的name -->
    <p>{{userName}}</p>
    <button @click="changeName">改變名字</button>
    <p :title="allName">{{allName}}</p>
  </div>
</template>

<script>
import { mapGetters , mapMutations } from 'vuex';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  computed:{
    userName:function(){
      // 有modules 之後，state user 的命名空間（子產品）下。是以屬性名前面必須加子產品名（命名空間），元件中通過 this.$store.state.子產品名.屬性名
      return this.$store.state.user.userName;
    },
    // ...mapGetters(['allName']) //modules中沒有添加namespaced
    ...mapGetters('user',['allName']), //添加了namespaced
  },
  methods:{
    changeName(){
      // this.$store.commit('changeName','Trump'); //modules中沒有添加namespaced
      this.$store.commit('user/changeName','Trump'); //添加了namespaced
      // 在子產品中，state 是被限制到子產品的命名空間下，需要命名空間才能通路。 但actions 和mutations, 其實還有 getters 卻沒有被限制，在預設情況下，
      // 它們是注冊到全局命名空間下的，所謂的注冊到全局命名空間下，其實就是我們通路它們的方式和原來沒有module 的時候是一樣的。比如沒有module 的時
      // 候，this.$store.dispatch(“actions”), 現在有了modules, actions 也寫在了module 下面（changeName 寫到了user目錄下的index.js中），我們
      // 仍然可以這麼寫，this.$store.commit(“changeName”)， 元件中的getters, 也是通過 this.$store.getters.module中getters 來擷取。
    }
  }
}
</script>