Laravel Inertia共享数据不更新

juzqafwq  于 2023-10-22  发布在  其他
关注(0)|答案(3)|浏览(92)

我有一个laravel breeze应用程序,并使用InertiaJS脚手架运行。我使用一个中间件来传递一般数据到布局。
问题如下:
用户可以更改国家/地区,如果国家/地区已更改,您将拥有不同的可用商店列表。并非所有商店都在布局中始终存在,如果您更改国家/地区,则会向您提供可用于特定国家/地区的所有商店的子集。
当用户从服务器更改国家/地区时,我会发出$inertia.post请求,如果用户通过了身份验证,我会将数据发送到CORE API以更新用户的首选项。
设置完成后,我返回一个\Redirect::back(),这样用户就可以返回他更改的国家。
在这里,如果我检查中间件,商店确实是正确的,但是前端没有获得新的数据,但是如果我在更改国家之后刷新,正确的商店就会显示出来。

//INERTIA VUE
 countryChange() {
   this.$inertia.post(this.route('switch_country'), {new_country_id: this.selected_country.id}, {})
 }

控制器动作

public function switchCountry(Request $request)
{
    $country_id = $request->get('new_country_id');

    if (SessionHandler::isAuth()) {
        $auth_token = SessionHandler::auth_token();
        $this->wrapper->changeCountry($country_id, $auth_token);
        $new_user_data = $this->wrapper->getUserInfo($auth_token);
        SessionHandler::sessionAuth($auth_token, $new_user_data['data']);
    }

    SessionHandler::updateCountry($country_id);
    return Redirect::back();
}

中间件

/**
 * Define the props that are shared by default.
 *
 * @param \Illuminate\Http\Request $request
 * @return array
 */
public function share(Request $request)
{
    $cachingService = resolve(CachingService::class);
    $country_id = SessionHandler::getCurrentCountry();

    $stores = $cachingService->stores->getStoresInCountry($country_id);

    return array_merge(parent::share($request), [
        'auth' => [
            'user' => session()->has('user') ? session('user') : null,
        ],
        'selected_country' => $cachingService->countries->getCountryById($country_id),
        'store_categories' => $cachingService->store_categories->retrieveByCountryId($country_id),
        'stores' => $stores,
        'countries' => array_values(collect($cachingService->countries->get())->sortBy('name')->toArray()),
    ]);
}

TLDR:为什么Inertia不更新我所有的应该传递给所有请求的 prop ,当它们改变时,它需要刷新才能正确显示数据?

lmvvr0a8

lmvvr0a81#

我以为我有同样的问题,因为数据没有在vue devtools中更新,但我已经检查了它与良好的旧console.log()方法,它显示,数据已更新

wtzytmuj

wtzytmuj2#

当我在v-if条件中错误地使用“=”时,我就遇到了这个问题。当我把它改为“==”时,问题就解决了。我不明白为什么,但我认为这与它在app.js中的编译方式有关。

tzxcd3kk

tzxcd3kk3#

对于任何来到这个线程的人来说,使用计算属性可能是答案。我遇到了同样的问题,试图通过这行更新在不同Vue组件中访问的User对象:

const user = usePage().props.auth.user;

用户模型的任何属性都成功共享,但用户对象不会在Vue中更新以反映在组件中。我不得不改变它来使用一个计算属性,像这样:

const page = usePage();
const user = computed(() => page.props.auth.user);

在我希望实时重新加载User对象的任何地方使用这两行代码。

相关问题