Как импортировать массивы из моих компонентов Vue в store.js (управление состоянием с помощью Vuex)

Question

Добрый вечер, ребята.:) У меня небольшая проблема.Я просто создал массив в компоненте Stocks Vue, который я создал, и теперь я хочу импортировать массив в мой файл store.js, где я централизовал все необходимые данные (Vuex).

Если есть ещеВопросы, просто спросите меня.^^

Answer 1

, где я централизовал все необходимые данные (Vuex).

Если вам нужен массив в вашем магазине, почему бы вам не инициализировать его там вместо компонента Stocks.vue?Я не могу много рассказать о вашем приложении только с .png.Есть ли конкретная причина, по которой вы не можете начать с массива в хранилище?

Если бы вам пришлось оставить его таким образом, вы могли бы установить нулевое значение в своем хранилище.Что-то вроде:

state: {
  funds: 10000,
  stocks: null
}

Затем напишите мутацию:

mutations: {
  SET_STOCKS (state, payload) {
    state.stocks = payload;
  }
}

Затем вы можете зафиксировать мутацию в вашем компоненте, где полезной нагрузкой будет значение вашего массива.Вы можете обойти мутации, напрямую манипулируя объектом состояния, но это не рекомендуется.

Answer 2

Предложение Натана правильное (и способ Vue к нему подойти).Однако стоит рассмотреть одну небольшую вещь - какая польза от при переносе этих данных в ваш штат?Это добавляет сложности, и если другие компоненты также не нуждаются в доступе к нему (и вы не можете передать его через реквизит), нет никакой реальной причины перемещать данные с уровня компонента.Не все состояние / данные приложения должны быть централизованы в вашей системе управления состоянием (в данном случае vuex).

Если, однако, данные должны быть доступны глобально (для всего приложения), то вы должны объявитьМассив stocks уже на стороне государства, и в вашем компоненте Stocks.vue просто отобразите состояние:

// store.js
export const store = new Vuex.store({
  state: {
    funds: 10000,
    stocks: [
      // Stocks data goes here
    ]
  },
  // ...
})

И затем сопоставьте его в вашем компоненте:

// Stocks.vue
<script>
  import { mapState } from 'vuex'

  export default {
    name: 'stocks',
    computed: {
      ...mapState({
        stocks: state => state.stocks
      })
    }
  }
</script>

Теперь вы можете получить доступ к stocks в Stocks.vue в вашем блоке шаблонов или this.stocks в вашем блоке скриптов (например, по методу).

PS!Добро пожаловать в StackOverflow:)

Answer 3

Вы проверили документацию ?

Основная идея, вам нужно импортировать хранилище из компонента, в котором вы хотите прочитать хранилище.