如何从存储中获取数据？

Question

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

这是我的代码： index.js

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        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>

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

感谢您的帮助

Answer 1

在计算属性中定义 mapGetter 时，您错过了扩展运算符和大括号

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

在此之后，您可以使用任何方法中的“this”运算符访问 getter

例如：

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