Merge branch 'master' of https://github.com/feathersjs-ecosystem/feathers-vuex into mixin-local

Author: Jérémy

docs/common-patterns.md

@@ -384,6 +384,10 @@ When this record is instantiated, the `user` attribute will first be turned into
 
 There's another amazing benefit from these relationships.  Because `feathers-vuex` listens to real-time events and keeps data up to date, when the user record changes, the `todo.user` automatically updates!
 
+### Handling Sequelize Joins
+
+See [this issue](https://github.com/feathersjs-ecosystem/feathers-vuex/issues/404) for a discussion on how to handle joins with Sequelize.  It's important to specify `raw: false`, as shown in [this comment](https://github.com/feathersjs-ecosystem/feathers-vuex/issues/404#issuecomment-571774598).
+
 ### Workflow for Saving Model Associations
 
 A great issue was opened on GitHub about the [Workflow for clone and save Model with associations](https://github.com/feathersjs-ecosystem/feathers-vuex/issues/278).  That's a great issue to read to get familiar with the workflow.

docs/data-components.md

@@ -81,6 +81,36 @@ The `FeathersVuexFind` component retrieves data from the API server, puts it in
 
 ## FeathersVuexGet
 
+The `FeathersVuexGet` component allows fetching data from directly inside a template.  It makes the slot scope available to the child components.  Note that in `[email protected]` the component now includes support for `params` and `fetchParams` props.  These are meant to replace the `query` and `fetchQuery` props.  The `params` allow you, for example, to configure a project to pass custom params to the server.  This would require use of custom hooks.
+
+```html
+<template>
+  <FeathersVuexGet service="users" :id="id" :params="params" :watch="[id, params]">
+    <template slot-scope="{ item: user }">
+      {{ user }}
+    </template>
+  </FeathersVuexGet>
+</template>
+
+<script>
+export default {
+  name: 'UserProfile',
+  computed: {
+    id() {
+      return this.$route.params.id
+    },
+    params() {
+      return {
+        $populateParams: {
+          name: 'withFollowers'
+        }
+      }
+    }
+  }
+}
+</script>
+```
+
 ## A note about the internal architecture
 
 These components use Vuex getters (to query data from the local store) and actions (to query data from the API server).  When a `query` or `id` is provided, the components pull data from the API server and put it into the store.  That same `query` or `id` is then used to pull data from the local Vuex store.  Keep this in mind, especially when attempting to use server-side pagination.  To use server-side pagination, use the `query` prop for pulling data from the local vuex store, then use the `fetchQuery` prop to retrieve data from the API server.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "feathers-vuex",
   "description": "FeathersJS, Vue, and Nuxt for the artisan developer",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "homepage": "https:feathers-vuex.feathersjs-ecosystem.com",
   "main": "dist/",
   "module": "dist/",
@@ -45,7 +45,7 @@
     "watch": "shx rm -rf lib/ && babel --watch -d lib/ src/",
     "lint": "standard --fix",
     "coverage": "istanbul cover node_modules/mocha/bin/_mocha -- --opts mocha.opts",
-    "test": "TS_NODE_PROJECT='tsconfig.test.json' mocha --require ts-node/register test/**/*.test.ts",
+    "test": "TS_NODE_PROJECT='tsconfig.test.json' mocha --require ts-node/register 'test/**/*.test.ts'",
     "testee": "testee test/index.html --browsers firefox",
     "start": "npm run compile && node example/app",
     "docs:serve": "vuepress dev docs",

src/FeathersVuexGet.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 export default {
   props: {
     /**
@@ -22,6 +23,29 @@ export default {
       type: Object,
       default: null
     },
+    /**
+     * If a separate query is desired to fetch data, use fetchQuery
+     * The watchers are automatically updated, so you don't have to write 'fetchQuery.propName'
+     */
+    fetchQuery: {
+      type: Object
+    },
+    /**
+     * Can be used in place of the `query` prop to provide more params. Only params.query is
+     * passed to the getter.
+     */
+    params: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Can be used in place of the `fetchQuery` prop to provide more params. Only params.query is
+     * passed to the getter.
+     */
+    fetchParams: {
+      type: Object,
+      default: null
+    },
     /**
      * When `queryWhen` evaluates to false, no API request will be made.
      */
@@ -34,13 +58,6 @@ export default {
       type: [Number, String],
       default: null
     },
-    /**
-     * If a separate query is desired to fetch data, use fetchQuery
-     * The watchers are automatically updated, so you don't have to write 'fetchQuery.propName'
-     */
-    fetchQuery: {
-      type: Object
-    },
     /**
      * Specify which properties in the query to watch and re-trigger API requests.
      */
@@ -76,13 +93,17 @@ export default {
   computed: {
     item() {
       const getArgs = this.getArgs(this.query)
-
       if (this.id) {
-        return (
-          this.$store.getters[`${this.service}/get`](
-            getArgs.length === 1 ? this.id : getArgs
-          ) || null
-        )
+        if (getArgs.length === 1) {
+          return this.$store.getters[`${this.service}/get`](this.id) || null
+        } else {
+          const args = [this.id]
+          const query = getArgs[1].query
+          if (query) {
+            args.push(query)
+          }
+          return this.$store.getters[`${this.service}/get`](args) || null
+        }
       } else {
         return null
       }
@@ -97,12 +118,14 @@ export default {
   methods: {
     getArgs(queryToUse) {
       const query = queryToUse || this.fetchQuery || this.query
-      const getArgs = [this.id]
+      const params = this.fetchParams || this.params
 
-      if (query && Object.keys(query).length > 0) {
+      const getArgs = [this.id]
+      if (params) {
+        getArgs.push(params)
+      } else if (query && Object.keys(query).length > 0) {
         getArgs.push({ query })
       }
-
       return getArgs
     },
     getData() {
@@ -121,8 +144,9 @@ export default {
               `${this.service}/get`,
               getArgs.length === 1 ? this.id : getArgs
             )
-            .then(() => {
+            .then(response => {
               this.isGetPending = false
+              return response
             })
         }
       }
@@ -131,17 +155,15 @@ export default {
       if (this.local || this.id === 'new') {
         return
       } else if (
-        this.id !== null &&
-        this.id !== undefined &&
-        !this.query &&
-        !this.fetchQuery
+        this.fetchQuery ||
+        this.query ||
+        this.params ||
+        (this.id !== null && this.id !== undefined)
       ) {
         return this.getData()
       } else {
         // eslint-disable-next-line no-console
-        console.log(
-          `No query and no id provided, so no data will be fetched.`
-        )
+        console.log(`No query and no id provided, so no data will be fetched.`)
       }
     }
   },
@@ -153,7 +175,7 @@ export default {
     }
     if (!this.$store.state[this.service]) {
       throw new Error(
-        `The '${ this.service }' plugin is not registered with feathers-vuex`
+        `The '${this.service}' plugin is not registered with feathers-vuex`
       )
     }
 
@@ -162,6 +184,7 @@ export default {
     if (
       this.fetchQuery ||
       this.query ||
+      this.params ||
       (this.id !== null && this.id !== undefined)
     ) {
       watch.forEach(prop => {