在 Vue 和 Vuex 的非子组件中获取存储值
Posted
技术标签:
【中文标题】在 Vue 和 Vuex 的非子组件中获取存储值【英文标题】:Get store value in non-child component in Vue and Vuex 【发布时间】:2018-08-07 06:36:17 【问题描述】:我有一个 Vuejs 应用程序,它使用 vue-router 作为路由,现在我想实现 Vuex 来管理相同的全局状态。问题是我无法使用 store,无论它是如何集成的,或者我如何尝试从组件中调用它,它都不起作用。
我只是在我的状态中有一个用户对象,我有一个突变和一个影响该状态的函数。当我初始化 Store 时,我用我需要的信息加载它,并且在 vue-tools 中信息正确显示,但是当我尝试从另一个组件访问该信息时出现问题。
存储/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
Vue.use(Vuex);
const state =
user:
;
const mutations =
SET_ACTIVE_USER: (state, action) =>
state.user = action.payload;
;
export default new Vuex.Store(
state,
mutations,
actions,
strict: 'false'
);
存储/actions.js
import axios from 'axios';
const actions =
getActiveUser( commit )
axios(
method: 'GET',
url: '/support/getUserData/',
headers:
credentials: 'same-origin'
).then(r =>
commit('SET_ACTIVE_USER',
payload: r.data
);
).catch(e =>
console.error(e);
);
;
export default actions;
这是我对 store 的实现,只是在 App.Vue 根组件中,我调用了该突变来更改状态并正确完成。
App.vue
<script>
import mapActions from "vuex";
import axios from "axios";
export default
name: "eol-app",
methods:
...mapActions(["getActiveUser"])
,
created()
this.getActiveUser();
;
</script>
所以,在 vue-tools 中我观察到了这一点:
现在,我尝试进入 store 并从另一个组件获取该数据,假设一个位于路径 /support/open
中的组件以下列方式,同时我尝试在 User 中分配 store 的这个值我在 data() 中的对象:
<script>
import mapState, mapActions from "vuex";
export default
name: "eol-ticket-open-list",
data()
return
user:
;
,
mounted()
this.user = this.getUser;
this.getConsortiums();
,
computed:
getUser()
return this.$store.state.user;
;
</script>
在 vue-tools 中我观察到这一点:
但是如你所见,User 对象是空的,我不能使用它。更糟糕的是,如果我尝试使用某个用户值发出 HTTP 请求,这会给我一个错误,显然是因为对象是空的。 还尝试创建一个计算属性,其中我只返回用户的 id,但它也不起作用,因为在这样做的情况下,返回的值是商店的默认值,而不是里面的值商店有效。
最后,如果需要,这是我的 main.js 文件:
import Vue from 'vue';
import router from './router';
import store from './store';
import Element from 'element-ui';
import locale from 'element-ui/lib/locale/lang/es';
import 'element-ui/lib/theme-chalk/index.css';
// Components
import App from './App';
// ElementUI Root Configuration.
Vue.use(Element,
size: 'small',
locale
);
Vue.config.productionTip = false;
new Vue(
el: '#app',
store,
router,
components:
App
,
template: '<App/>'
);
欢迎任何帮助,因为我真的不明白我做错了什么,也不知道如何解决这个问题。 谢谢!
【问题讨论】:
您在mounted
中将user
设置为getUser
的值,因为AJAX 调用需要时间 是一个空对象。您需要等到user
有实际值才能使用它。此外,您不应根据计算值初始化数据值,而应仅使用计算值。
@Bert 当然,但是当我尝试使用计算值时,我得到一个未定义的错误,这就是我不明白的原因。
【参考方案1】:
解决方案是 Ber 在原始问题的第一条评论中描述的解决方案,因为它不是答案,因为他回答了我的问题,所以解决了。
必须使用计算的属性,而不是将它们的值分配给我的 copmonent 数据中的属性或对象。
【讨论】:
以上是关于在 Vue 和 Vuex 的非子组件中获取存储值的主要内容,如果未能解决你的问题,请参考以下文章
我正在尝试从我的 vuex 存储中获取数据,但它给出了一个错误
Vue,vuex:如何使用命名空间存储和模拟对组件进行单元测试?