这是我的 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
访问它。
要访问存储状态,更好(也是推荐)的方法是 map the state在您的组件内。
在您的示例中,它应该类似于:
import { mapState } from 'vuex'
export default {
...
computed: {
...mapState({
isLoggedIn: 'isLoggedIn'
})
}
}
在您的模板中,不需要this
。只需通过名称调用该属性即可:
{{ isLoggedIn }}
关于vue.js - 如何在vue js中访问组件的存储值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52071402/