Vuex: 변환 내에 저장할 여러 항목 추가

Vuex: 변환 내에 저장할 여러 항목 추가

다음과 같은 매장이 있습니다.

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

제 구성 요소에는 기호, 금액 및 통화에 대한 세 가지 입력이 포함된 양식이 있습니다.

컴포넌트의 게터를 호출하면computed: mapGetters(['crypto_prices'])데이터를 getter(OK)로부터 돌려받습니다.

문제:

새로운 암호화를 추가하면 스토어가 새로운 데이터로 덮어쓰게 됩니다.어떻게 하면 돌연변이에 추가할 수 있을까요?

같이 해봤는데store.data.push({...})근데 중복된 게 있어서...

그거는 힘을 줘야 돼요.중복되지 않으려면 다음과 같이 기존 엔트리를 찾아 새 엔트리와 교환해야 합니다.

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

언급URL : https://stackoverflow.com/questions/50528055/vuex-append-multiple-items-to-store-within-mutation