鍍金池/ 問答/HTML/ vuex中不通過commit Mutation更改store的數(shù)據(jù)會(huì)有什么弊端？

vuex中不通過commit Mutation更改store的數(shù)據(jù)會(huì)有什么弊端？

vuex 官網(wǎng)建議通過commit mutation 來改變store里的數(shù)據(jù)，但在實(shí)際項(xiàng)目中不方便，因?yàn)樾枰淖兊臓顟B(tài)太多，要寫好多個(gè)方法來commit很麻煩 ，所以我就通過js給store里面的state數(shù)據(jù)增加了path路徑

clipboard.png

然后把path綁定到需要改變狀態(tài)的標(biāo)簽上，在需要改變狀態(tài)時(shí)候獲取path，并通過eval("this.$store.getters.PhysicsData" + path + ".ifCollection=" + true );來改變store里面的數(shù)據(jù)狀態(tài)，現(xiàn)在效果達(dá)到了，但心里老趕腳方方的，，，想問下各位大神，這樣修改store會(huì)有什么弊端嗎？

回答
編輯回答
掛念你

Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。

嚴(yán)格模式

在嚴(yán)格模式下，無論何時(shí)發(fā)生了狀態(tài)變更且不是由 mutation 函數(shù)引起的，將會(huì)拋出錯(cuò)誤。這能保證所有的狀態(tài)變更都能被調(diào)試工具跟蹤到。

首先你這種做法肯定是錯(cuò)誤的，你這樣做只會(huì)更復(fù)雜。
你說需要改變的狀態(tài)太多，需要寫多個(gè) mutation 來 commit 很麻煩，你可能對(duì) mutation 有什么誤解

你完全可以這樣做來達(dá)到同樣的效果：

const store = new Vuex.Store({
  state: {
    allSmallChapter: [],
  },
  mutations: {
    saveCollection(state, payload) {
      const { index, ifCollection } = payload;
      state.allSmallChapter = state.allSmallChapter.map((item, itemIndex) => {
        if (itemIndex === index) {
          item.ifCollection = ifCollection;
        }
        return item;
      });
    },
  },
});
this.$store.commit('saveCollection', {
  index: 0,
  ifCollection: true,
});
2017年3月13日 00:38
編輯回答
舊顏

Veux的mutations是很重要的一點(diǎn)，就是把處理數(shù)據(jù)邏輯方法全部放在mutations里面，使得數(shù)據(jù)和視圖分離；

如果按照你那樣做卻是可以實(shí)現(xiàn)目的，但是在健壯性、可讀性、維護(hù)性上來說不建議這樣做的。如果你的同事或者下一位填坑的人不懂你的想法，是不是得一臉懵逼的到處罵人

2017年11月7日 22:41
編輯回答
別瞎鬧

剛才看了下，那種方式也能被vue調(diào)試工具跟蹤到，就是可讀性不高，代碼沒你這么看著舒服，我再考慮下項(xiàng)目中是否可以改成這種方式，謝謝了

2017年9月4日 06:01