設計模式(4): 給組件實現單獨的store

概述

最近最近作項目的時候總會思考一些大的應用設計模式相關的問題，我把本身的思考記錄下來，供之後開發時參考，相信對其餘人也有用。

組件自身的store

咱們在開發組件的時候，時常都有這種需求，就是但願給組件一個獨立的store，這個store可能被用來儲存數據，共享數據，還能夠被用來對數據作一些處理，抽離核心代碼等。

store的數據不共享

若是組件自身的store是每一個實例獨自擁有的而且不共享的話，咱們能夠直接用一個類來實現。

// store.js
export default class Store {
  constructor(data, config) {
    this.config = config;
    this.init(data);
  }

  init(data) {
    // 對數據作處理
  }

  // 其它方法
}

而後咱們在組件中實例化這個store，而後掛載到data屬性裏面去：

<script>
import Store from './store';

export default {
  data() {
    return {
      store: [],
    };
  },
  methods: {
    initStore() {
      // 生成 options 和 config
      this.store = new Store(options, config);
    },
  },
};
</script>

store的數據須要共享

若是store的數據須要共享，咱們建議用動態掛載vuex的store的方法，示例以下：

// store.js
const state = {
  data: [],
};

const getters = {};

const actions = {};

const mutations = {
  setData(state, value) {
    this.state.data = [...value];
  },
};

export default {
  state,
  getters,
  actions,
  mutations,
};

而後咱們在註冊這個組件的時候動態掛載這個store：

import Store from './store';

export default {
  install(Vue, options) {
    Vue.store.registerModule('xxx', store);
  },
};

最後咱們就能夠在組件中使用這個store的數據啦~~~