如何在Vue的v-if中访问Vuex中的布尔值？求助

错误原因 #

你在模板里直接使用store.state.initSession，但组件实例并没有将导入的store挂载为自身属性，导致Vue无法识别store变量，从而抛出Property or method "store" is not defined警告。

解决方案 #

方案1：全局注入Store（推荐，全局可用） #

在项目入口文件（通常是main.js）中，将Vuex Store注入到根Vue实例，这样所有组件都能通过this.$store访问：

// main.js
import Vue from 'vue'
import App from './App.vue'
import { store } from './store'

new Vue({
  store, // 注入Store到根实例
  render: h => h(App)
}).$mount('#app')

修改App.vue的模板，使用$store访问state：

<template>
  <div>
    <div v-if="$store.state.initSession">If true</div>
  </div>
</template>

方案2：使用mapState映射计算属性（最佳实践） #

通过Vuex的mapState辅助函数，将state中的属性映射为组件的计算属性，代码更简洁且符合规范：

<template>
  <div>
    <div v-if="initSession">If true</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { store } from '../store'

export default {
  store, // 若未全局注入，需在此声明
  computed: {
    ...mapState(['initSession']) // 映射state中的initSession到计算属性
  }
}
</script>

方案3：直接将Store挂载到组件实例（不推荐） #

虽然能解决问题，但不符合Vuex使用规范，不建议用于生产环境：

<template>
  <div>
    <div v-if="store.state.initSession">If true</div>
  </div>
</template>

<script>
import { store } from '../store'

export default {
  data() {
    return {
      store // 将导入的Store放入data，供模板访问
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Sam