Quasar + Feathers-Vuex：如何整合？

Question

我想使用Quasar将FeathersJS与Feathers-Vuex整合

Feathers-Vuex使用pattern来：

• 承诺从localStorage / cookies进行身份验证
• .then（/ *启动new Vue() app * /）

我使用Quasar CLI 1.0.beta16-ish创建了我的应用程序并查看了/ src并找不到Quasar的主要入口点。我觉得我错过了什么。

什么包括src/store/index.js？

quasar.conf.js包括这个评论 - main.js在哪里

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    boot: ["axios"],

Feathers-Vuex包含一个Nuxt集成指南，可以解决同样的问题。这些包对我来说都是新手，我很高兴能够学习它们！

谢谢！

Answer 1

main.js的一部分包含在quasar app.js中，您可以在.quasar文件夹中找到它。 src/store/index.js包含Vuex Store定义。 “商店”基本上是一个容纳您的应用程序状态的容器。

欲了解更多详情，请访问 - https://quasar-framework.org/guide/app-vuex-store.html https://quasar-framework.org/guide/app-plugins.html

Answer 2

我最终得到了两件事：

1. 将Feathers-Vuex添加到我的后端。
2. 在我的Quasar项目中添加这个“启动文件”

如果我不得不再次弄清楚这些评论是面包屑的痕迹:-)

/*
  Context: 

  For 3rd-party API's, we us /src/boot/axios.js

  For our own API's, we use FeathersClient (socket.io & REST)
  https://docs.feathersjs.com/guides/basics/clients.html
  https://docs.feathersjs.com/api/authentication/client.html#appconfigureauthoptions

  Our FeathersClient is in `/src/lib/feathersClient.js`
  and imported into `/src/store/index.js`
  which is imported by Quasar's build system.  /src/quasar.conf.js setting(?)

  Feathers-vuex integrates Vuex with FeathersClient:
  https://feathers-vuex.feathers-plus.com/auth-module.html

  Feathers-Vuex proxies it's authentication/logout actions to FeathersClient
  https://github.com/feathers-plus/feathers-vuex/blob/master/src/auth-module/actions.js

  The parameters for these actions are here:
  https://docs.feathersjs.com/api/authentication/client.html#appauthenticateoptions

  In addition to this module, you can use FeathersVuex state in UI from here:
  https://feathers-vuex.feathers-plus.com/auth-module.html


  This module:

  Create a Feathers Auth integration for Vue as a Quasar Boot Module. 

  // Use case: test if user is authenticated

    if (Vue.$auth.currentUser()) { ... }

  // Use case: get current user's email

    name = Vue.$auth.currentUser("email") || "anonymous"

  // Use case: Login

    Vue.$auth.login({
      strategy: 'local',
      email: '[email protected]',
      password: 'my-password'
    });

  // Use case: Logout

    // logs out and sends message
    let p = Vue.$auth.logout();
    // After logout, go home
    p.then(() => {
      // User data still in browser
      router.push({ name: "home"});
      // To clear user data, do a hard refresh/redirect - https://feathers-vuex.feathers-plus.com/common-patterns.html#clearing-data-upon-user-logout
      location && location.reload(true)
    }); 

 */

export default ({ app, router, store, Vue }) => {
  // Create the API demonstrated above
  const auth = {
    currentUser(prop) {
      let u = store.state.auth.user || false;
      if (u && prop) return u[prop];
      return u;
    },
    login(authData, quiet) {
      return store
        .dispatch("auth/authenticate", authData)
        .then(() => {
          Vue.prototype.$q.notify({
            message: "Welcome back!",
            type: "info"
          });
        })
        .catch(err => {
          if (!quiet) {
            console.log(err);
            Vue.prototype.$q.notify({
              message: "There was a problem logging you in.",
              type: "error"
            });
          }
        });
    },
    logout(quiet) {
      return store.dispatch("auth/logout").then(() => {
        if (!quiet)
          Vue.prototype.$q.notify({
            message: "You've been logged out.",
            type: "info"
          });
      });
    },
    register(authData) {}
  };

  // Auth from JWT stored in browser before loading the app.  true => suppress token not found error
  auth.login("jwt", true);

  // Add API to Vue
  Vue.prototype.$auth = auth;

  // If you would like to play with it in the console, uncomment this line:
  // console.log(auth);

  // Then, in the console:
  /*
    temp1.login({
      strategy: "local",
      email: "[email protected]", 
      password: "secret" 
    })
  */

  // If you haven't created this user, see here:
  // https://docs.feathersjs.com/guides/chat/authentication.html
  // For this REST api endpoint
  /*
    curl 'http://localhost:3001/users/' -H 'Content-Type: application/json' --data-binary '{ "email": "[email protected]", "password": "secret" }'
  */
};