快捷導(dǎo)航

vuex 動態(tài)注冊方法 registerModule的實現(xiàn)

更新時間：2019年07月03日 14:39:02 作者：cason6810

這篇文章主要介紹了vuex 動態(tài)注冊方法 registerModule的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Vuex（2.3.0+）可以用store.registerModule方法在進(jìn)入路由時進(jìn)行注冊，離開路由時候銷毀 actions, mutations, getters, state，在一定范圍內(nèi)相同名稱不會被覆寫

例子

index.js

傳this 的寫法

module.exports = {
  install(_this) {
    _this.$store.registerModule(['abc'], {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({commit}, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val;
        }
      }
    })
  },
  uninstall(_this) {
    _this.$store.unregisterModule(['abc'])
  }
};

不傳this，有寫 store 的寫法

import store from '../../store';

export default {
  install() {
    store.registerModule(['abc'], {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({commit}, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val;
        }
      }
    })
  },
  uninstall() {
    store.unregisterModule(['abc'])
  }
}

調(diào)用方法時應(yīng)該在創(chuàng)建完實例之后的鉤子中，未創(chuàng)建實例調(diào)用會找不到 store。

在install、uninstall時，傳遞this過去，可以在上面中直接調(diào)用。

dispath 時，如果設(shè)置了命名空間，則一定要加上，我這個因為沒使用較復(fù)雜的命名，注冊時的名字就在命名空間那用了。

test.vue

import abc from '../../store/test';
...
created() {
  // 掛載對應(yīng)的 store
  abc.install(this);
  console.log(this.$store, 'install');
},
destroyed() {
  // 銷毀對應(yīng)的 store
  abc.uninstall(this);
  console.info(this.$store, 'uninstall');
},
methods: {
 test(){
  this.$store.dispatch('abc/setTest', Math.random());
 }

總結(jié)

當(dāng)范圍內(nèi)使用動態(tài)方法注冊 actions 時還是比較爽的，而且在destroyed 鉤子中銷毀可以節(jié)省一部分資源；

配置命名空間也可以避免覆蓋問題，算是多一種手段吧（感覺還是應(yīng)用在多模塊，全局注冊時用到這個）；

當(dāng)沒有父子關(guān)系時，但還需要多頁面共享狀態(tài)，可以用動態(tài)注冊就不太方便了；
（我好像還是沒解決全局注冊時方法過多的問題。。。）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: