可以使用vuex显示数据

Question

我是一个新的.net+vuejs学习者，我正在使用
vuejs的这个项目模板

我正在尝试在项目中使用VUEX来显示数据库的国家数据，但它不起作用

main.js

import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

index.js

import { createApp } from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import countries from "./module/countries/countries";

createApp(App).use(Vuex);
export default new Vuex.Store({
modules: {
    countries: countries
}
});

存储文件

import axios from "axios";
const state = {
countries:[]
};


const countries = {
async getCountries({ commit }, payload) {
    const result = await axios.get("Pho/GetCountries");
    return result.data;
}
};

export default {
namespaced: true,
state,
mutations,
countries,
getters
}

我的组件

<script>
import axios from 'axios'
import swal from 'sweetalert';
export default {
   
    name: "Home",
    data() {
        return {
            countries: [],
            
        }
    },
    methods: {
        getCountries: async function () {
            this.countries = await this.$store.dispatch("countries/getCountries");
        }
        },
    mounted() {
        this.getCountries();
    }
    }
    </script>
   

错误：未经读取（在承诺中）typeError：无法读取未定义的属性（读取'dispatch'） 我试图将商店进口到我的主机

import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './index.js'

createApp(App).use(router, store).mount('#app')

。

Answer 1

从存储文件中调用API并不是一个好习惯。使用Vuex存储仅存储，使用Mixins（推荐）或组件方法发送API。我将展示一种简单的管理Vuex存储方法！
存储文件：index.js

import Vue from 'vue'
Vuex from 'vuex'
import router from '../router/index'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: { 
    countries:[]
  },
  getters: {},
  mutations: {
      countriesChanger(state, payload) {
         state.countries = payload;
      },
  },
  actions: {},
});

组件文件：mycomponent.vue

<template>
 <li v-for="country in countries">
   {{country}}
  </li>
</template>
<script>
export default {

name: "Home",
data() {
    return {
        countries: [],
        
    }
 },
 
  mounted() {
      this.getCountries(); // assume this function calls to your API
  },
  watch: {  
  "$store.state.countries": function () {
    // Listens when countries in storage updated
      this.countries = this.$store.state.countries;
    }
}
</script>

更改vuex存储项目（要更新国家/地区），从您的API获取数据后使用突变：

this.$store.commit("countriesChanger", countriesFromAPI);

就是这样！