Javascript 如何从存储中获取数据？

如何使用vuejs从vuex存储区获取数据

这是我的密码： index.js

data.js

import axios from 'axios';

const state = {
    data: ''
};

const getters = {
    getData: (state) => {
        return state.data;
    }
};

const actions = {
    async fetchData({ commit }, { id }) {
        const response = await axios.get(`http://someUrl?id=${id}`);
        console.log(response.data);
        commit('setData', response.data);
    }
}

const mutations = {
    setData: (state, data) => (state.data = data)
}

export default {
    state, getters, actions, mutations
}

要在其中获取此数据的Vue文件：

<script>
  import FooterComponent from "@/components/Footers/Footer.vue";

  import { mapGetters, mapActions } from 'vuex';

  export default {
    data() {
      return {
        id: ""
      }
    },
    name: "Index",
    methods: {
      ...mapActions(["fetchData"]),
      launchFetchData() {
        this.fetchData({ id: this.id})
        this.$router.push("login");
      }
    },
    computed: mapGetters(["getData"])
  }
</script>

从“@/components/Footers/Footer.vue”导入FooterComponent；
从“vuex”导入{MapGetter，mapActions}；
导出默认值{
数据（）{
返回{
id:“
}
},
名称：“索引”，
方法：{
…映射操作（[“fetchData”]），
launchFetchData（）{
this.fetchData（{id:this.id}）
这是$router.push（“登录”）；
}
},
计算：mapGetters（[“getData”]）
}

那么，如何在不同的vue文件/模板上显示vuex存储区中的数据

---

感谢您的帮助

在computed属性中定义mapGetter时，您遗漏了扩展运算符和大括号

computed: {
    ...mapGetters(["getData"])
}

在此之后，您可以从任何方法使用“this”操作符访问getter

例如：

methods: {
 sample() {
   console.log(this.getData);
 }
}

---

你在哪里导入index.js？@svelteDev-太好了！如果它对你有效并且你很快乐，那么一般来说你会接受答案。这不仅有助于解决同一问题的其他人，也意味着人们将来更有可能在你遇到的任何其他问题上帮助你。您可以在这里阅读关于接受的内容：stackoverflow.com/help/accepted-answer

methods: {
 sample() {
   console.log(this.getData);
 }
}