Vuex 通过 slim (Ruby on rails) 获取数据答案

【问题标题】：Vuex get data via slim (Ruby on rails)Vuex 通过 slim (Ruby on rails) 获取数据
【发布时间】：2021-10-30 21:16:21
【问题描述】：

如果我通过 Slim 接收数组，如何传输数据？

regions-list :region=@regions

regions-list - 我的组件 vue

:region - 包含项目的数组

@regions - 带有后端项目的变量

我是vuex 的新手，我想，我需要这样的东西，但不知道如何用项目传达数组

【问题讨论】：

您会通过 Api 提取数据吗？还是只是想从 Slim 模板将数据传递给 Vue 组件（然后再传递给 vuex）？
@grovskiy 如果可能的话，我更喜欢第二种解决方案。但不知道如何传达（可能需要导出/导入？）。在我的vue component 我已经有props 和region: []
也许这个answer可以帮助你？
如果您需要 Vuex 的答案，请告诉我，因为我从一开始就对这个问题的理解不同，并开始写答案，但决定澄清一下。
@grovskiy 不幸的是，在我看来，这个选项不适合。我知道如何从苗条模板转移到 vue，但是如何使用 vuex ：\

标签： ruby vue.js vuejs2 vuex vue-router

【解决方案1】：

这就是组织 Vuex 工作的方式

export default new Vuex.Store({
  state: {
    reactions: [],
  },
  mutations: {
    setReactions(state, segment) {
      state.reactions = segment;
    },
  },
  actions: {
    async loadReactions({ commit }) {
      try {
        const reactions = '... response/request';

        commit('setReactions', reactions); // Here we use mutation to put new data into state.
      } catch (e) {
        // ...
      }
    },
  },
});

在你的组件 vue 区域列表中

<template>
  <div>{{ reactions }}</div> <!-- Here you can display and look at the content -->
</template>

<script>
  import { mapState, mapActions } from 'vuex';

  export default {
    name: 'RegionsList',
    computed: {
      ...mapState(['reactions']), // This is get the state
    },
    created() {
      this.loadReactions(); // Here you perform a function that receives data and puts it in state
    },
    methods: {
      ...mapActions(['loadReactions']),
    },
  };
</script>

<style scoped></style>

【讨论】：