Quasar + Feathers-Vuex:如何整合?

时间:2019-04-18 18:13:23

标签: feathersjs quasar-framework feathers-vuex

我想使用QuasarFeathersJSFeathers-Vuex集成

Feathers-Vuex使用pattern进行以下操作:

  • 保证从localStorage / cookies进行身份验证
  • .then(/ *启动new Vue()应用* /)

我使用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集成指南,可以解决相同的问题。这些软件包对我来说都是新的,我很高兴学习它们!

谢谢!

2 个答案:

答案 0 :(得分:1)

if '|' in text: title, speaker = text.split('|', 1) elif ':' in text: speaker, title = text.split(':', 1) 的一部分包含在main.js文件夹中的quasar app.js中。 .quasar包含Vuex商店定义。基本上,“商店”是保存应用程序状态的容器。

有关更多详细信息,请访问-https://quasar-framework.org/guide/app-vuex-store.html https://quasar-framework.org/guide/app-plugins.html

答案 1 :(得分:0)

我最后有两件事:

  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: 'my@email.com',
      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: "feathers@example.com", 
      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": "feathers@example.com", "password": "secret" }'
  */
};