Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update mutation not changing store or backend #38

Closed
jhlabs opened this issue Aug 9, 2017 · 3 comments
Closed

Update mutation not changing store or backend #38

jhlabs opened this issue Aug 9, 2017 · 3 comments

Comments

@jhlabs
Copy link

jhlabs commented Aug 9, 2017

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
Copy link
Contributor

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
Copy link
Author

jhlabs commented Aug 9, 2017

@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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants