另一个js文件中的Vuejs变量没有更新

Question

我有另一个js文件，它像用户一样存储数据。

export var selectedUser = null;

(变量多次变化(

然而，当我尝试从App.vue文件访问该数据时，它说它没有改变。

以下是我导入数据的方式：

import * as config from "./config"

Answer 1

如果导入一个常规JS文件，它将不会是反应性的，因为常规JS没有连接VueJS状态，因此它不会是反应式的。

为什么不直接将状态添加到VueJS中？甚至可以使用Vuex。

Answer 2

您可以通过创建一个函数来从JavaScript文件中设置所选用户，如果用户选择了，则返回回调函数，并在vuejs组件中侦听回调以更新selectedUser变量(该变量将在vuej组件中(

组件代码：

<template>
<div>
user {{ selectedUser }}
<button @click="update()"> Update user </button>

</div>
</template>
<script>
import getUserData from './GetUser';
import updateUser from './UpdateUser';
import {ref} from 'vue'
export default {
name: 'HelloWorld',
setup(){
let selectedUser = ref('ahmed');
const userData = getUserData();
function update(){
updateUser(selectedUser, (theNewValue) => {
// to be reactive
selectedUser.value = theNewValue;
});
}
return {...userData, update, selectedUser};
}
}

用户文件：

export default function updateUser(selectedUser, updated){
selectedUser = 'new value';
alert(`User Updated Successfully ${selectedUser}`);
// pass new value to get it from vuejs component
updated(selectedUser)
}