设计模式(4): 给组件实现单独的store

设计模式(4): 给组件实现单独的store
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说设计模式(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的数据啦~~~

转载于:https://www.cnblogs.com/yangzhou33/p/11391951.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29420

发表评论