Beta test the pre-release

[marshallswain]

A Beta version of 1.0.0 is available and published on npm. If you would like to try it out, just do

npm install feathers-vuex@pre

You can find docs in the 1.0 branch readme.md:
https://github.com/feathersjs/feathers-vuex/tree/1.0

The internal API stays almost 100% the same, and only the general usage instructions change. The big breaking changes are

1. No more using it as a Feathers plugin. This design was flawed and required complicated logic, making it more difficult to maintain. It also caused problems with SSR. Configuration is all done inside the Vuex store:

import Vue from 'vue'
import Vuex from 'vuex'
import feathersClient from '../feathers-client'
import feathersVuex from 'feathers-vuex'

const { service, auth } = feathersVuex(feathersClient)

Vue.use(Vuex)

const store = new Vuex.Store({
  plugins: [
    service('todos'),
    auth()
  ]
})

export default store

2. Feathers services are now untouched. This means the .vuex method is gone, as is the vuexOptions object.

I would love it if somebody could try this out with Nuxt and let me know how it goes.

[LinusBorg]

Looking great!

A small mistake in the README: It says that the state for each service will have a service property, but that's not the case.

[marshallswain]

Thanks, @LinusBorg. I had removed it internally, but it should have been removed from the docs at that time. I've decided to add it back as servicePath, so it's a string and most importantly, it's serializable. I've published it as feathers-vuex@1.0.0-pre.1.

[LinusBorg]

Good solution, that should work!

[LinusBorg]

So i have been testing this, but only in a small app that's in the early stages, so only 3 services and auth, but so far it works really nice!

the new API is really good.

[marshallswain]

I just released feathers-vuex@1.0.0-pre.2, which removes the need to use RxJS and feathers-reactive. All reactivity runs through Vuex, now. All features remain intact, too! 🎉 🎉 🎉

I would love it if everyone could try it out and provide feedback.

[FossPrime]

Works with no hiccups, the new api looks amazing. If you want to try it out with the feathers-vuex app, I have a fork with the neccesary changes feathersjs-ecosystem/feathers-chat-vuex-0.7#46

[marshallswain]

@rayfoss oh hell yes! You saved me a lot of time. Thank you! I'll look it over and get it merged. I'm so glad it's working well. I'm sure the increase in test coverage helped. 😄

[LinusBorg]

When we have a paginated service, feathers-vuex currently swallows that information, it's not added to the state. I think it should be, we need some way to get the total after we made a paginated call with dispatch('users/find') for example.

[marshallswain]

@LinusBorg, Pagination is a difficult one. I've rethought, fixed, and tested pagination support. Please try it out when you get a chance.

It was pretty tricky. You can read more about the implementation here in the readme: https://github.com/feathersjs/feathers-vuex/tree/1.0#querying-with-find--pagination

npm install feathers-vuex@1.0.0-pre.3

[LinusBorg]

Thanks! Will try this asap.

I can understand that this is not very easy, but your solution seems to solve it senisbly.

[dortamiguel]

Everything is working very nice with the pre.3, but I'm getting an error.

If I reset the database and remove all users the feathers-jwt remains on the browser so feathers-vuex tries to use it to log in.

With the previous version the auth got an error and couldn't finish, with this last version the login finishes successfully after I call it like this.

this.$store.dispatch('auth/authenticate')

In feathers backend I get this error

error:  NotFound: No record found for id '59a5f97c3619be8112ef0014'

[marshallswain]

@ellipticaldoor I don't see a way around this other than manually deleting the jwt from storage.

[dortamiguel]

@marshallswain what I did before the pre was catching the authentication error and delete the jwt with this code:

async created() {
	try {
		await this.$store.dispatch('auth/authenticate')
	} catch (error) {
		if (
			error.message.includes('Could not find stored JWT') ||
			error.message.includes('_id is missing from current user.')
		) {
			const token = localStorage.getItem('feathers-jwt')

			if (token) {
				localStorage.removeItem('feathers-jwt')
				document.cookie =
					'feathers-jwt=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'
				location.reload()
			}
		} else {
			console.error(error)
		}
	}
},

But now in the pre the error is not catched and also on the vuex store looks like it succesfully logged in:

This is how the error looks now:

Vuex store:

How I can catch it?

[marshallswain]

Version 1.x has shipped! npm install feathers-vuex@latest It's very easy to customize, now. See the docs in the Readme.md.