如何在 Vuex 中使用 Ziggy

Question

有人在 Vuex 中使用 Ziggy 吗？我最近安装了 Ziggy (https://github.com/tighten/ziggy)，所以我可以在我的 Vue (2) 文件中使用 Laravel 的命名路由。它在我的 Vue 组件上工作得很好，但是对于 Vuex 文件来说情况就不同了，我在 Vuex 操作中有许多 axios 调用。该文档没有提及 vuex 模块，我尝试从 Ziggy 供应商包中导入 route 方法的所有尝试都会导致页面加载时出现编译错误或控制台错误（例如，route is not defined）。我试过：

import route from '../...relative-path-to.../vendor/tightenco/ziggy/dist/index.js';

import route, { ZiggyVue } from 'ziggy';

以及其他地方建议的方法 (https://highlandsolutions.com/blog/how-i-like-to-simplify-ziggys-route-helper)

Answer 1

好的，感谢 Ziggy 开发人员的一些提示，我得到了答案。首先，Ziggy 现在有一个 npm 包（我推荐）和 composer 一样好。

https://www.npmjs.com/package/ziggy-js

接下来，要在 Vuex 文件中使用 Ziggy，请将其添加到文件顶部（这是我的 store.js 文件，它导入了几个 Vuex 模块）：

import route from 'ziggy-js'
import { Ziggy }  from '@/routes';
window.route = (name, params, absolute, config = Ziggy) => route(name, params, absolute, config);

请注意，这与您对 Vue 组件所做的完全不同，后者需要 ZiggyVue 插件。对于 Vuex，你必须导入 route() 并设置它。

在 Vuex 模块中，您可以使用 Ziggy 的 route() 辅助方法进行任何 axios（或其他 ajax）调用；例如，

     const {data} = await axios.get(
        route(
          'api.project.edit_data',
          {id: projectId}
        )
      )

如何在 Vuex 中使用 Ziggy

How to use Ziggy with Vuex

laravel

vue.js

ziggy