如何将阵列从我的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方法）。不过，需要考虑的一件小事-将数据移至您的州有什么好处？它增加了复杂性，除非其他组件也需要访问它（并且您不能通过prop向下传递），否则没有真正的理由将数据从组件级移出。并非所有应用程序的状态/数据都必须集中在您的状态管理系统（在本例中为vue）中。

但是，如果数据应该是全局（应用程序范围）可访问的，那么您应该声明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

您是否检查过documentation？

您需要从要读取商店的组件中导入商店的基本思想。