时间戳

首页 > 解决方案 > 来自另一个 js 文件的 Vuejs 变量未更新

javascript - 来自另一个 js 文件的 Vuejs 变量未更新

问题描述

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

export var selectedUser = null;

（变量多次变化）

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

这是我导入数据的方式：

import * as config from "./config"

标签： javascriptvue.jselectron

解决方案

您可以通过创建一个函数来设置从 JavaScript 文件中选择的用户并在用户选择时返回回调函数并在 vuejs 组件中侦听回调以更新 selectedUser 变量（该变量将在 vuejs 组件中），从而使其具有反应性

组件代码：

<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)
}

推荐阅读