Vuex에서 mapState에 액세스하여 표시로 렌더링하는 방법

Vuex에서 mapState에 액세스하여 표시로 렌더링하는 방법

API의 모든 데이터를 Axios에서 뷰로 되돌리고 Vuex를 사용하여 상태를 저장하려고 합니다.이 소스 코드는 "console.log"를 반환할 수 있지만 뷰에 전달할 수 없습니다.

mounted()를 change()로 변경하려고 했지만 아직 동작하지 않습니다.

여기 내 소스 코드: '.store/modules/form.js'에서:

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);

const state = {
  posts: [],
};
const mutations = {
  setPosts(state, posts) {
    state.posts = posts;
  }
};
const actions = {
  loadPosts({ commit }) {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(response => resnponse.data)
      .then(posts => {
        commit("setPosts", posts);
        console.log(posts);
      });
  }
};
export default {
  //namespaced: true,
  state,
  mutations,
  actions
};

.store/index.js의 경우:

import Vuex from "vuex";
import Vue from "vue";
import form from "./modules/form";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    form
  }

});

컴포넌트/포스트에서vue’ :

<template>
  <div>
    <div class="container">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Body</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="post in posts" :key="post.id">
            <td>{{ post.id }}</td>
            <td>{{ post.title }}</td>
            <td>{{ post.body }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "PostsPage",
  computed: mapState(["posts"]),
  mounted() {
    this.$store.dispatch("loadPosts");
  },
};
</script>

도와주실 수 있다면 정말 감사합니다.

내 생각엔 그가 이 약을 복용하고 있는 것 같아.modules그는 노력해야 한다

computed: mapState("form", ["posts"]),

(평가가 낮아서 코멘트를 추가할 수 없습니다: ( )

저는 vue js에 익숙하지 않습니다만, 투고를 렌더링 하는 컴포넌트에서 이것을 시험해 볼 수 있습니다.

import { mapState } from 'vuex';

그리고나서computed: { ...mapState(['posts']) }

언급URL : https://stackoverflow.com/questions/57145244/how-to-accessing-mapstate-in-vuex-and-render-it-to-view