gpt4 book ai didi

vue.js - 如何在vue js中访问组件的存储值

转载 作者:行者123 更新时间:2023-12-02 07:12:24 26 4
gpt4 key购买 nike

这是我的 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com