Vue 反应性：使用提供和注入创建反应性数据

Question

我的目标是从 vue 前端验证用户的凭据，获取他们的数据，将数据存储在全局可用的变量中，并在任何组件中使用它们。经过一些工作，我可以将 Vue 的 reactive() 方法与 inject 和 provide 一起使用。这是我当前的代码：

在 store/index.js

import { reactive, inject } from 'vue'

// global states
export const stateSymbol = Symbol('state')
export const createState = () => reactive({
    backendRoute: 'http://127.0.0.1:8000/',
    currentUser: {},
    logIn: userData => {
        let user = createState.currentUser
        user = userData
        console.log(user)
    }
})

export const useState = () => inject(stateSymbol)

然后在 ma​​in.js

import { createApp } from 'vue'
import App from './App.vue'
// store modules
import { stateSymbol, createState } from './store'

// create app
const app = createApp(App)
app.provide(stateSymbol, createState())

然后在名为Login.vue

的登录/注册组件中

import { useState } from "../store"
import axios from 'axios'

export default {
    name: 'RegisterLogin',
    setup() {
       let state = useState()
       axios.get(getUser, jwtConfig).then(response => {
                userId = response.data.id
                const currentUser = getUserProfile+userId // URL
                console.log(currentUser)
                const getCurrentUser = axios.get(currentUser, jwtConfig)
                getCurrentUser.then(response => {
                    
                    state.logIn(response.data)
                    console.log(state.currentUser)

                })
            })
    }
}

store/index.js 中的

console.log(user) 按预期记录userData。我相信，createState.currentUser 应该被改变。然而问题是console.log(state.currentUser) 记录了一个空的代理对象。另外，如果我尝试从 Home.vue 等其他组件访问 state.currentUser：

<template>
{{ state.currentUser }}
</template>

<script>
import { useState } from '../store/'

export default {
        name: 'Index',
        setup() {

            return {
                state: useState(),
            }
        },
}
</script>

...即使用户成功登录，也始终显示一个空对象。有什么我做错了吗？感谢您的帮助（提前）。

Answer 1

看来@Daniel 毕竟是对的。我在 store/index.js 中的logIn 方法并没有真正改变currentUser 属性。事实上，我无法从该方法访问该属性。为了解决这个问题，我必须在then 方法中的state.currentUser = response.data 之类的axios 调用之后立即进行突变，然后在所有组件中更新状态！谢谢。

Answer 2

我正在查看代码，但找不到变量发生变异的任何地方，但我相信我知道发生了什么。

您正在重新分配 user 对象，而不是将 createState.currentUser 分配给另一个对象。

import { reactive, inject } from 'vue'

// global states
export const stateSymbol = Symbol('state')
export const createState = reactive({
    backendRoute: 'http://127.0.0.1:8000/',
    currentUser: {},
    logIn: userData => {
        // over here you assign user to createState.currentUser
        let user = createState.currentUser; 

        // then you reassign user to `user data`
        user = userData
        console.log(user)
    }
})

export const useState = () => inject(stateSymbol)

你可以试试

import { reactive, inject } from 'vue'

// global states
export const stateSymbol = Symbol('state')
export const createState = () => reactive({
    backendRoute: 'http://127.0.0.1:8000/',
    currentUser: {},
    logIn: userData => {
        createState.currentUser = userData
        console.log(createState.currentUser)
    }
})

export const useState = () => inject(stateSymbol)

顺便说一句，你为什么使用inject？我不知道你期望它做什么。

export const useState = () => stateSymbol 会得到相同的结果，但你甚至不需要传递函数，你可以使用更简洁的东西，比如......

//////// store 

import { reactive } from 'vue'

// global states
export const store = reactive({
    backendRoute: 'http://127.0.0.1:8000/',
    currentUser: {}
})
export const logIn = (userData) => {
    store.currentUser = userData
}

////////////////////////////////////////////////
////// main

import { store, logIn } from "../store"
import axios from 'axios'

export default {
    name: 'RegisterLogin',
    setup() {
       axios.get(getUser, jwtConfig).then(response => {
                userId = response.data.id
                const currentUser = getUserProfile+userId // URL
                console.log(currentUser)
                const getCurrentUser = axios.get(currentUser, jwtConfig)
                getCurrentUser.then(response => {
                    logIn(response.data)
                    console.log(store.currentUser)
                })
            })
    }
}