设计模式(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的数据啦~~~