Question

我有以下商店：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({

  plugins: [createPersistedState()],

  state: {
    data: [
      {symbol: '', price: ''}
    ]
  },

  mutations: {
    RECEIVE_PRICE(state, {symbol, price}) {
      state.data = {
        symbol: symbol,
        price: price
      }
      // state.data.push({
      //   symbol: symbol,
      //   price: price
      // });
    }
  },

  actions: {
    async FETCH_PRICE({commit}, payload) {
      const url = `https://min-api.cryptocompare.com/data/price?fsym=${payload.symbol}&tsyms=${payload.currency}`;
      const {data} = await axios.get(url);
      commit('RECEIVE_PRICE', {
        symbol: payload.symbol,
        price: data[payload.currency]
      });
    }
  },

  getters: {
    crypto_prices: state => {
      return state;
    }
  }
})

在我的组件中，我有一个包含 Symbol ， Amount 和 Currency 三个输入的表单。

当我在我的组件computed: mapGetters(['crypto_prices'])中调用我的getter时，我从getter获取数据（OK）。

问题：

当我添加新的加密时，我的商店会被新数据覆盖。我如何将其添加到我的突变中？

我用store.data.push({...})尝试了但是我有重复...

Answer 1

你必须使用推送。如果你不想要任何重复，你必须找到一个现有的条目并与新的条目交换它，如下所示：

const index = state.data.findIndex(d => d.symbol === symbol)
if (index === -1) 
  state.data.push({symbol, price});
else 
  state.data[index] = {symbol, price}

Answer 2

要添加到商店，您可以调用操作：

async ADD_CRYPTO({commit}, payload) {
  //save to db or whatnot.  Upon success...
  commit('set_crypto', <payload or server data>);
}

然后通过变异添加它：

set_crypto(state, crypto) {
    state.data.unshift(crypto);
},

您可能要考虑的另一件事是将商店中的“数据”重命名为加密，货币或其他更具描述性的内容，这仅仅是因为vue使用单词数据的方式。

此外，在您的吸气剂中，您可以随着商店的增长而只调用该商品......

 currencies: state => {
    return state.currencies;
},

Vuex：在变异中附加多个项目进行存储

2 个答案: