vue.js - 如何在 vue js 中访问存储值到组件
问题描述
这是我的 store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isLoggedIn: !!localStorage.getItem('token'),
isLog : !!localStorage.getItem('situation')
},
mutations: {
loginUser (state) {
state.isLoggedIn = true
state.isLog = true
},
logoutUser (state) {
state.isLoggedIn = false
state.isLog = false
},
}
})
但是当我在 display.vue 中调用 {{state.isLoggedIn}} 时,我没有得到值。
在 display.vue 中,我使用
<script>
import axios from "axios";
import store from '../store';
export default {
name: "BookList",
data() {
return {
students: [],
errors: [],
state: this.state.isLoggedIn,
};
},
})
</script>
<template>
{{this.state}}
</template>
但是当我这样做时,我遇到了错误。请任何人都可以请帮助是什么问题。
解决方案
您不需要将您的商店导入到您的组件中。相反,您应该使用this.$store
.
要访问存储状态,更好(也是推荐的)方法是在组件中映射状态。
在您的示例中,它应该类似于:
import { mapState } from 'vuex'
export default {
...
computed: {
...mapState({
isLoggedIn: 'isLoggedIn'
})
}
}
在您的模板中,this
不需要。只需按其名称调用该属性:
{{ isLoggedIn }}
推荐阅读
- python - 试图告诉我的 pylint“太多局部变量”是什么,我该怎么办?
- mysql - 使用没有 SQLINjection 范围的 JPA 或 entityManager 查找列的不同值
- javascript - Vue,Vuex:访问嵌套反应类中的私有属性
- android - 防止由于“机器学习”(三星的 PkgPredictorService)而自动启动 Android 应用程序
- python - 如何找到意外缩进错误的原因
- java - Gradle+AspectJ找不到参数“'aspectj'不能应用于'(?,java.lang.String,?,?)'”的方法aspectj()
- javascript - 悬停在冻结列上时,SlickGrid 上的垂直滚动没有任何效果
- git - Github - 我是否需要多个 SSH 密钥用于不同的项目?(苹果系统)
- css - 是否可以通过 CDN 使用 Bootstrap 4 而不会接管整个风格?
- android - STATE_CONNECTED 并不意味着它真的是 CONNECTED?