bugfix> javascript > 投稿

私は次の店を持っています:

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;
    }
  }
})

私のコンポーネントには、3つの入力を持つフォームがありますシンボル そして通貨

コンポーネント computed: mapGetters(['crypto_prices']) でgetterを呼び出すときゲッターからデータを取得します(OK)。

問題:

新しい暗号を追加すると、ストアは新しいデータで上書きされます。 どうすれば突然変異に追加できますか?

store.data.push({...}) で試したしかし、私は重複しています...

回答 2 件
  • そのためにはプッシュを使用する必要があります。重複したくない場合は、既存のエントリを見つけて、次のように新しいエントリと交換する必要があります。

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

  • ストアに追加するには、アクション

    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;
    },
    
    

あなたの答え