设计模式(2): 响应store中数据的变化

概述

最近最近做项目的时候总会思考一些大的应用设计模式相关的问题，我把自己的思考记录下来，供以后开发时参考，相信对其他人也有用。

store里面响应数据变化

通常情况下，我们会把数据存在store里面，并且，有时我们也需要跟踪store里面的数据变化，并作出响应。例子如下：

export default {
  computed: {
    categories: state => state.categories.categories,
  },
  watch: {
    categories() {
      this.fetchCardData();
    },
  },
  methods: {
    fetchCardData() {
      // 请求卡片数据
    },
  },
}

如上所示，当store里面的categories改变的时候，我们会自动调用api去请求数据。

不响应store里面的数据变化

上面的例子里面，每次当categories改变的时候，fetchCardData方法都会被调用。有些时候，这并不是我们想要的，我们想要的是，当xxxx的时候，categories会改变，fetchCardData方法会跟着被调用；当xxxx的时候，categories会改变，fetchCardData方法又不会跟着被调用，怎么办呢？

方法是创造一个标记，但是如何优雅的创造标记呢？我有一个方法如下所示：

// store.js
const state = {
  categories: [],
  categoriesChanges: 0,
};

const actions = {
  updateCategories({ commit }, value) {
    // 如果带有shouldNotChange，则表示不要刷新页面
    if (value.shouldNotChange) {
      commit(types.UPDATE_CATEGORIES, value.data);
    } else {
      commit(types.UPDATE_CATEGORIES, value);
      commit(types.UPDATE_CATEGORIES_CHANGES);
    }
  },
};

const mutations = {
  [types.UPDATE_CATEGORIES](state, value) {
    state.categories = value;
  },
  [types.UPDATE_CATEGORIES_CHANGES](state) {
    state.categoriesChanges += 1;
  },
};

// component.js
export default {
  computed: {
    categories: state => state.categories.categories,
    categoriesChanges: state => state.categories.categoriesChanges,
  },
  watch: {
    categoriesChanges() {
      this.fetchCardData();
    },
  },
  methods: {
    fetchCardData() {
      // 利用this.categories的部分数据来请求卡片数据
    },
  },
}

// business.js
this.$store.dispatch('updateCategories', value); // 会自动调用fetchCardData方法

const payload = {
  shouldNotChange: true,
  data: [...value],
};
this.$store.dispatch('updateCategories', payload); // 不会自动调用fetchCardData方法

这样，我们发出同一个action，却能达到2种不同的效果，非常方便。