快捷導(dǎo)航

vuex 動(dòng)態(tài)注冊方法 registerModule的實(shí)現(xiàn)

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

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

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

例子

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)用方法時(shí)應(yīng)該在創(chuàng)建完實(shí)例之后的鉤子中，未創(chuàng)建實(shí)例調(diào)用會(huì)找不到 store。

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

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

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)使用動(dòng)態(tài)方法注冊 actions 時(shí)還是比較爽的，而且在destroyed 鉤子中銷毀可以節(jié)省一部分資源；

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

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

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

您可能感興趣的文章: