如何通过长尾词构建一个，解决VUEX的mapState...mapState等取值问题？

本文共计971个文字，预计阅读时间需要4分钟。

页面中出现 `this.$store` 的错误，通常是因为以下原因：

1. 组件生命周期错误：确保在组件正确初始化后访问 `this.$store`。如果是在 `created` 或 `mounted` 钩子中使用，可能因为 Vue 的异步渲染导致 `$store` 未定义。

2. store 依赖错误：如果 `this.$store` 在组件外部的某个地方定义，确保它是在 Vue 实例创建之前定义好的。

3. 方法调用时机错误：如果是在方法中访问 `this.$store`，确保该方法是在组件完全挂载之后调用。

以下是一些建议，以避免这类错误：

- 确保在组件的 `created` 或 `mounted` 钩子中使用 `this.$store` 之前，Vue 实例已经挂载。- 如果 `this.$store` 是一个全局变量，确保它在 Vue 实例创建之前已经被正确初始化。- 如果 `this.$store` 是在某个方法中使用的，确保该方法在组件完全挂载后被调用。

例如：

javascriptexport default { mounted() { this.fetchData(); }, methods: { fetchData() { const data=this.$store.state.someData; // 处理数据 } }}

有木有发现你页面的this.$store，一般都正常，但是总有那么几次，成为你页面报错的罪魁祸首！，那其实除了和vue的生命周期有关以外，还跟store取值的方式有关，下面就说一下新大陆之——mapState mapMutations mapGetters的使用

简单说一下我对mapState的理解，字面意思就是把store中state 的值遍历出来，任你取用，就不用写this.$store.getters.getState.openId等这么长的取值了，同理，mapMutations mapGetters也是把store中对应的mutations getters方法遍历出来

下面上代码，看一下具体怎么操作

store.js代码

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { showLoading0: true, showLoading1: true, showLoading2: true, showLoading3: true, // 头大不复制了...... showLoading9: true, }, // getters 适用于获取值，不会改变state原值 getters: { getStore (state) { return state } }, // 修改state mutations: { updateLoading (state, showLoading) { state.showLoading = showLoading } }, actions: { } })

原来vue中的代码

<script> export default { data() { return { showLoading0: this.$store.getters.getStore.showLoading0, showLoading1: this.$store.getters.getStore.showLoading1, showLoading2: this.$store.getters.getStore.showLoading2, showLoading3: this.$store.getters.getStore.showLoading3, // 头大不复制了...... showLoading9: this.$store.getters.getStore.showLoading9 } }, methods: { updateLoading() { this.$store.commit('updateLoading', false) } } } </script>

弱弱的问问看官，你脚的这个this.$store烦不烦，这要是有十个值，甚至要看到整整齐齐的十个this.$store…唉呀，真可怕，这时候mapState的用途就来了，看代码：

<script> // 用之前要先引入vuex中的mapXXX方法 import { mapState } from 'vuex' export default { data() { return { showLoading0: (state) => state.showLoading0 showLoading1: (state) => state.showLoading1 showLoading2: (state) => state.showLoading2 showLoading3: (state) => state.showLoading3 // 头大不复制了...... showLoading9: (state) => state.showLoading9 } } } </script>

听说你还不满意？那看看下面的简写吧，别被自己曾经的方法蠢哭哦~

// 用之前要先引入vuex中的mapXXX方法 import { mapState } from 'vuex' export default { //data() { // return { // } //} // 对你没有看错哦，不用data接收了，直接用computed,使用和data里一模一样哦~ // <h1 v-if="showLoading0">{{showLoading1}}</h1> // console.log(this.showLoading9) computed: { ...mapState([ 'showLoading0','showLoading1',....,'showLoading9' ]) } }

mapMutations mapGetters的使用也是同理

// 用之前要先引入vuex中的mapXXX方法 import { mapState } from 'vuex' export default { // 使用 this.getStore() computed: { ...mapGetters([ 'getStore' ]) }, // 使用this.updateLoading() // 就相当于this.$store.commit('updateLoading') methods: { ...mapMutations([ 'updateLoading' ]), } }

其实最好采用computed的方式取值，这样会避免很多问题的发生，特别是数据更新不及时~

补充知识：vuex的mapState方法来获取vuex的state对象中属性

有两种写法

1.首先在组件中引入vuex的mapState方法：

import { mapState } from 'vuex'

然后在computed中这样写：

computed:{ ...mapState({ save:state => state.save//使用ES6的箭头函数来给count赋值 }) }

2.需要先在组件中引入vuex的mapState方法：

import { mapState } from 'vuex'

然后在computed中这样写：

computed: ...mapState([' save']) }

以上这篇解决VUEX的mapState/...mapState等取值问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。