请求后不更新的 Vue 变量值

Question

大家好，我对变量值有问题。

在请求中，如果有匹配，我会匹配每个数组值，如果有，则将匹配变量更新为 true。问题是返回的匹配变量在请求内更新后不会在请求外部更新。如何获取更新的匹配值？

模板

<template>
<div>{{$acl(['post.edit'])}}</div> <!-- always display false -->
</template>

努克斯特插件

let match = false
let moduleName = ''
let actionName = ''
Vue.prototype.$acl = ( access ) => {
let bindAccess = access
storeRequest.then( done => {
_.each( bindAccess, ( value, index ) => {
moduleName = value.split('.')[0]
actionName = value.split('.')[1]
/**
* check if user access modules match with bindAccess module
*/
if( aclConfig[moduleName] != undefined ) {
_.each( aclConfig[moduleName], ( actions, index ) => {
if(actions.action_name === actionName) {
match = true
return false
}
})
}
})
console.log(match) //returns true since their is a match
})
console.log(match) //always returns false
return match
}

Answer 1

承诺在方法返回后得到解析，因此match方法返回后会更改，因此你总是会得到 false。

您应该在组件实例上声明一个字段，然后从插件内部更改该变量。

<template>
<div>{{$acl(['post.edit']), isAMatch}}</div>
</template>

并在插件中

Vue.prototype.$acl = ( access ) => {
let bindAccess = access
storeRequest.then( done => {
_.each( bindAccess, ( value, index ) => {
moduleName = value.split('.')[0]
actionName = value.split('.')[1]
/**
* check if user access modules match with bindAccess module
*/
if( aclConfig[moduleName] != undefined ) {
_.each( aclConfig[moduleName], ( actions, index ) => {
if(actions.action_name === actionName) {
this.isAMatch = true
return false
}
})
}
})
})
// no need to return here
// return match
}

Answer 2

你必须使用mixins，像这样：

{
data: () => {
return { 
aclConfig
}
},
created() {
this.aclConfig = this.$store.getAclConfig(); // or maybe using Promise
},
methods: {
checkAccess(roles) {
let match = false;
_.each(roles, (role) => {
const splited = value.split('.');
const moduleName = splited[0];
const actionName = splited[1];
if (this.aclConfig[moduleName]) {
_.each(this.aclConfig[moduleName], (actions) => {
if (actions.action_name === actionName) {
match = true;
return false;
}
});
}
});
return match;
}
}
}

您可以在模板中使用它，如下所示：

<template>
<div>{{ checkAccess(['post.edit']) }}</div>
</template>