feathersjs-ecosystem / feathers-vuex

Integration of FeathersJS, Vue, and Nuxt for the artisan developer
https://vuex.feathersjs.com
MIT License
445 stars 108 forks source link

Update mutation not changing store or backend #38

Closed jhlabs closed 7 years ago

jhlabs commented 7 years ago

Steps to reproduce

I want to populate a name field for one record of the user model that has already been created. The Vue component for this process:

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      firstName: undefined,
      company: undefined
    }
  },
  computed: {
    currentUserId () {
      return this.getCurrentUser.id
    },
    currentCompanyId () {
      return this.getCurrentCompany.id
    },
    ...mapGetters('users', {
      getCurrentUser: 'current'
    }),
    ...mapGetters('companies', {
      getCurrentCompany: 'current'
    })
  },
  methods: {
    finish (firstName, company) {
      const userId = this.currentUserId
      const userData = {name: this.firstName}
      this.updateUser([userId, userData])
    },
    // Map the actions provided by feathers-vuex to easy functions
    ...mapActions('users', {
      updateUser: 'update'
    }),
    ...mapActions('auth', [
      'authenticate'
    ]),
    ...mapActions('companies', {
      createCompany: 'create'
    })
  }
}
</script>

Expected behavior

The action should update the vuex state and database entries in the feathers backend.

Actual behavior

The action triggers a mutation, as seen in the Vue Dev tools, but there is no value updated: image There is no change added in the backend either.

System configuration

feathers-vuex config

'use strict'

import 'babel-polyfill'
import feathers from 'feathers/client'
import hooks from 'feathers-hooks'
import auth from 'feathers-authentication-client'
import restClient from 'feathers-rest/client'
import feathersVuex from 'feathers-vuex'
import axios from 'axios'
import store from '@/store/'

const feathersClient = feathers()
  .configure(hooks())
  .configure(restClient('http://localhost:3030').axios(axios))
  .configure(auth({ storage: window.localStorage }))
  .configure(feathersVuex(store, {
    idField: 'id',
    auth: {
      userService: '/users',
    }
  }))

feathersClient.service('/users')
feathersClient.service('/companies')

export default feathersClient

package.json

{
  "name": "seads-app",
  "version": "1.0.0",
  "description": "The client for the seads app.",
  "author": "Johannes Herrmann <johannes.herrmann2012@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit/specs"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "babel-polyfill": "^6.23.0",
    "feathers": "^2.1.4",
    "feathers-authentication-client": "^0.3.2",
    "feathers-hooks": "^2.0.1",
    "feathers-reactive": "^0.4.1",
    "feathers-rest": "^1.8.0",
    "feathers-vuex": "^0.7.0",
    "rxjs": "^5.4.2",
    "vee-validate": "^2.0.0-rc.8",
    "vue": "^2.3.4",
    "vue-router": "^2.3.1",
    "vuetify": "^0.13.0",
    "vuex": "^2.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^3.5.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^4.0.0",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb-base": "^11.1.3",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.30",
    "karma-webpack": "^2.0.2",
    "lolex": "^1.5.2",
    "mocha": "^3.2.0",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.3.4",
    "vue-style-loader": "^2.0.5",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^2.3.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
jskrzypek commented 7 years ago

How are you calling the update? It looks like you are just providing something like { name: 'Johannes' } as the payload.

You probably need to call the the update method like this:

    this.updateUser([this.currentUserId, { ...this.getCurrentUser, name: 'Johannes' }])

But it would probably be better to use patch so you don't have to sent the rest of the data from the current user again

jhlabs commented 7 years ago

@jskrzypek thanks for the reply. Your solution adds the new value indeed to the store, but for me not to the feathers backend. I am trying to follow the patch instructions from the docs here:

image

It is actually just a type in the docs that causes the problem. This is the current doc for patch:

let data = {description: 'write your tests', completed: true}
let params = {}
store.dispatch('todos/update', [1, data, params])

But it should actually state:

let data = {description: 'write your tests', completed: true}
let params = {}
store.dispatch('todos/patch', [1, data, params])

Then everything works fine with just adding the changed values as payload. @marshallswain I am new to programming and don't want to mess up your docs :). Do you agree with the change?

marshallswain commented 7 years ago

Ah, yes. Thanks @Johannes90. I've fixed this in the 1.0 branch.