mounted 不能派遣吗？ vuex

Question

有谁知道为什么我的 state.pages 没有填充我用 axios 获取的 json 数据？但是，当我更改文件中的某些内容并保存它时，vite 将重新加载，数据会显示在页面上。当我在浏览器中刷新页面时会再次消失。

浏览量：

<template>
  <main v-if="page">
    <h1>{{ page.title }}</h1>
    <div class="content" v-html="page.content"></div>
  </main>
  <main v-else>
    <h1>loading</h1>
  </main>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      page: null,
    };
  },
  methods: {
    ...mapActions({ getPages: "getPages" }),
  },
  computed: {
    slug() {
      return this.$route.params.slug;
    },

    getPage() {
      console.log(this.$store.state.pages);
      return (this.page = this.$store.state.pages.find(
        (page) => page.slug === this.slug
      ));
    },
  },
  mounted() {
    this.$store.dispatch("getPages");

    this.getPages();
    this.getPage;
  },
};
</script>

<style>
</style>

Vuex 索引：

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state() {
    return {
      pages: [],
    };
  },
  mutations: {
    setPages(state, { response }) {
      state.pages = response.data;
    },
  },
  actions: {
    getPages({ commit }) {
      axios.get('../src/data/pages.json').then((response) => {
        commit('setPages', { response });
      });
    },
  },
  getters: {},
});

export default store;

Answer 1

竞争条件的结果是因为 promises 没有正确链接。根据经验，每个使用 promises 的函数都应该链接所有正在使用的 promise 和 return 作为其工作结果的 promise。

getPages被派遣了两次。

应该是：

getPages({ commit }) {
  return axios....

并且：

  mounted() {
    return this.getPages()
    .then(() => {
      ...
    });
  },

mounted 不能派遣吗？ vuex

Can't dispatch in mounted? vuex

javascript

vue.js

vuex

vuejs3