Skip to content

Instantly share code, notes, and snippets.

@autumnwoodberry
Last active March 24, 2022 06:49
Show Gist options
  • Star 28 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save autumnwoodberry/d56d4f28d987b846c5216b2142586f7c to your computer and use it in GitHub Desktop.
Save autumnwoodberry/d56d4f28d987b846c5216b2142586f7c to your computer and use it in GitHub Desktop.
vuex + vuelidate
import Vue from 'vue'
import { validationMixin } from 'vuelidate'
import { required, minLength } from 'vuelidate/lib/validators'
export default function (store) {
const validator = new Vue({
mixins: [
validationMixin
],
computed: {
name () {
return store.getters['user/name']
}
},
validations: {
name: { required, minLength: minLength(3) }
}
})
const module = {
namespaced: true,
state: {
name: '',
},
getters: {
name (state) {
return state.name
},
$v (state) {
// don't expose api
return Object.assign({}, validator.$v)
}
},
actions: {
$touch () {
validator.$v.$touch()
},
name ({ commit }, value) {
commit('name', value)
}
},
mutations: {
name (state, value) {
state.name = value
}
}
}
return module;
}
@gbrocha
Copy link

gbrocha commented Jul 3, 2020

@autumnwoodberry
Hey man, thanks for share this solution.

I have a question in implementation.
Who pass the store as param to the module factory?

That would help me a lot. Thanks

@gbrocha
Copy link

gbrocha commented Jul 3, 2020

Ohh, i found a solution for this.

Using the store.registerModule.

Sorry by the flood.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment