Mixing
How To Watch Mutation In Vuex Plugin
I am having an issue with a plugin I am attempting to use. Note that code works fine after refreshing page however on initial login the mutation it is set to watch (createSession) is not responding correctly. I am not sure if anyone is familiar with the CASL package, but I don't think the issue is there but perhaps something I need to be doing to make the plugin work correctly.
Here is the plugin ability.js
import { Ability } from '@casl/ability'
export const ability = new Ability()
export const abilityPlugin = (store) => {
ability.update(store.state.rules)
const rules = store.subscribe((mutation) => {
switch (mutation.type) {
case 'createSession':
ability.update(mutation.payload.rules)
break
case 'destroySession':
ability.update([{ actions: '', subject: '' }])
break
}
console.log(ability.rules)
})
return rules
}
Here is the store where I am importing
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import { abilityPlugin, ability as appAbility } from './utils/ability'
import storage from './utils/storage'
export const ability = appAbility
Vue.use(Vuex)
axios.defaults.baseURL = 'http://traxit.test/api'
export default new Vuex.Store({
plugins: [
storage({
storedKeys: ['rules', 'token'],
destroyOn: ['destroySession']
}),
abilityPlugin
],
state: {
rules: '',
token: localStorage.getItem('access_token') || null,
sidebarOpen: true,
loading: false,
},
mutations: {
createSession(state, session) {
state.rules = session[0]
state.token = session.access_token
},
}
and I am mutation the createSession with my response data from the initial login action which is to retrieve token and rules here
retrieveToken({ commit }, credentials) {
return new Promise((resolve, reject) => {
axios.post('/login', {
username: credentials.username,
password: credentials.password,
})
.then(response => {
const token = response.data.access_token
localStorage.setItem('access_token', token)
commit('createSession', response.data)
resolve(response)
})
.catch(error => {
console.log(error)
reject(error)
})
})
},
any help would be greatly appreciated!! I have been stuck on this issue for a while..
vue.js vuex casl
asked Nov 22 '18 at 5:41
TJ WeemsTJ Weems
157110
add a comment |
I am having an issue with a plugin I am attempting to use. Note that code works fine after refreshing page however on initial login the mutation it is set to watch (createSession) is not responding correctly. I am not sure if anyone is familiar with the CASL package, but I don't think the issue is there but perhaps something I need to be doing to make the plugin work correctly.
Here is the plugin ability.js
import { Ability } from '@casl/ability'
export const ability = new Ability()
export const abilityPlugin = (store) => {
ability.update(store.state.rules)
const rules = store.subscribe((mutation) => {
switch (mutation.type) {
case 'createSession':
ability.update(mutation.payload.rules)
break
case 'destroySession':
ability.update([{ actions: '', subject: '' }])
break
}
console.log(ability.rules)
})
return rules
}
Here is the store where I am importing
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import { abilityPlugin, ability as appAbility } from './utils/ability'
import storage from './utils/storage'
export const ability = appAbility
Vue.use(Vuex)
axios.defaults.baseURL = 'http://traxit.test/api'
export default new Vuex.Store({
plugins: [
storage({
storedKeys: ['rules', 'token'],
destroyOn: ['destroySession']
}),
abilityPlugin
],
state: {
rules: '',
token: localStorage.getItem('access_token') || null,
sidebarOpen: true,
loading: false,
},
mutations: {
createSession(state, session) {
state.rules = session[0]
state.token = session.access_token
},
}
and I am mutation the createSession with my response data from the initial login action which is to retrieve token and rules here
retrieveToken({ commit }, credentials) {
return new Promise((resolve, reject) => {
axios.post('/login', {
username: credentials.username,
password: credentials.password,
})
.then(response => {
const token = response.data.access_token
localStorage.setItem('access_token', token)
commit('createSession', response.data)
resolve(response)
})
.catch(error => {
console.log(error)
reject(error)
})
})
},
any help would be greatly appreciated!! I have been stuck on this issue for a while..
vue.js vuex casl
asked Nov 22 '18 at 5:41
TJ WeemsTJ Weems
157110
What do you see if you logmutation.typein your watcher. Does the mutation you want to act on come by? Could it possibly be prefixed with the module name you are using? If it works after a refresh, do you use the same code path to set the abilities there too?
– Sumurai8
Nov 22 '18 at 8:47
@Sumurai8, thank you for the help, so when I console logged themutation.payloadI realized that the way I was trying to access the data was incorrect. I will post my answer.
– TJ Weems
Nov 22 '18 at 14:35
add a comment |
I am having an issue with a plugin I am attempting to use. Note that code works fine after refreshing page however on initial login the mutation it is set to watch (createSession) is not responding correctly. I am not sure if anyone is familiar with the CASL package, but I don't think the issue is there but perhaps something I need to be doing to make the plugin work correctly.
Here is the plugin ability.js
import { Ability } from '@casl/ability'
export const ability = new Ability()
export const abilityPlugin = (store) => {
ability.update(store.state.rules)
const rules = store.subscribe((mutation) => {
switch (mutation.type) {
case 'createSession':
ability.update(mutation.payload.rules)
break
case 'destroySession':
ability.update([{ actions: '', subject: '' }])
break
}
console.log(ability.rules)
})
return rules
}
Here is the store where I am importing
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import { abilityPlugin, ability as appAbility } from './utils/ability'
import storage from './utils/storage'
export const ability = appAbility
Vue.use(Vuex)
axios.defaults.baseURL = 'http://traxit.test/api'
export default new Vuex.Store({
plugins: [
storage({
storedKeys: ['rules', 'token'],
destroyOn: ['destroySession']
}),
abilityPlugin
],
state: {
rules: '',
token: localStorage.getItem('access_token') || null,
sidebarOpen: true,
loading: false,
},
mutations: {
createSession(state, session) {
state.rules = session[0]
state.token = session.access_token
},
}
and I am mutation the createSession with my response data from the initial login action which is to retrieve token and rules here
retrieveToken({ commit }, credentials) {
return new Promise((resolve, reject) => {
axios.post('/login', {
username: credentials.username,
password: credentials.password,
})
.then(response => {
const token = response.data.access_token
localStorage.setItem('access_token', token)
commit('createSession', response.data)
resolve(response)
})
.catch(error => {
console.log(error)
reject(error)
})
})
},
any help would be greatly appreciated!! I have been stuck on this issue for a while..
vue.js vuex casl
asked Nov 22 '18 at 5:41
TJ WeemsTJ Weems
157110
I am having an issue with a plugin I am attempting to use. Note that code works fine after refreshing page however on initial login the mutation it is set to watch (createSession) is not responding correctly. I am not sure if anyone is familiar with the CASL package, but I don't think the issue is there but perhaps something I need to be doing to make the plugin work correctly.
Here is the plugin ability.js
import { Ability } from '@casl/ability'
export const ability = new Ability()
export const abilityPlugin = (store) => {
ability.update(store.state.rules)
const rules = store.subscribe((mutation) => {
switch (mutation.type) {
case 'createSession':
ability.update(mutation.payload.rules)
break
case 'destroySession':
ability.update([{ actions: '', subject: '' }])
break
}
console.log(ability.rules)
})
return rules
}
Here is the store where I am importing
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import { abilityPlugin, ability as appAbility } from './utils/ability'
import storage from './utils/storage'
export const ability = appAbility
Vue.use(Vuex)
axios.defaults.baseURL = 'http://traxit.test/api'
export default new Vuex.Store({
plugins: [
storage({
storedKeys: ['rules', 'token'],
destroyOn: ['destroySession']
}),
abilityPlugin
],
state: {
rules: '',
token: localStorage.getItem('access_token') || null,
sidebarOpen: true,
loading: false,
},
mutations: {
createSession(state, session) {
state.rules = session[0]
state.token = session.access_token
},
}
and I am mutation the createSession with my response data from the initial login action which is to retrieve token and rules here
retrieveToken({ commit }, credentials) {
return new Promise((resolve, reject) => {
axios.post('/login', {
username: credentials.username,
password: credentials.password,
})
.then(response => {
const token = response.data.access_token
localStorage.setItem('access_token', token)
commit('createSession', response.data)
resolve(response)
})
.catch(error => {
console.log(error)
reject(error)
})
})
},
any help would be greatly appreciated!! I have been stuck on this issue for a while..
vue.js vuex casl
vue.js vuex casl
asked Nov 22 '18 at 5:41
TJ WeemsTJ Weems
157110
asked Nov 22 '18 at 5:41
TJ WeemsTJ Weems
157110
asked Nov 22 '18 at 5:41
TJ WeemsTJ Weems
157110
asked Nov 22 '18 at 5:41
TJ WeemsTJ Weems
157110
asked Nov 22 '18 at 5:41
TJ WeemsTJ Weems
157110
157110
What do you see if you logmutation.typein your watcher. Does the mutation you want to act on come by? Could it possibly be prefixed with the module name you are using? If it works after a refresh, do you use the same code path to set the abilities there too?
– Sumurai8
Nov 22 '18 at 8:47
@Sumurai8, thank you for the help, so when I console logged themutation.payloadI realized that the way I was trying to access the data was incorrect. I will post my answer.
– TJ Weems
Nov 22 '18 at 14:35
add a comment |
What do you see if you logmutation.typein your watcher. Does the mutation you want to act on come by? Could it possibly be prefixed with the module name you are using? If it works after a refresh, do you use the same code path to set the abilities there too?
– Sumurai8
Nov 22 '18 at 8:47
@Sumurai8, thank you for the help, so when I console logged themutation.payloadI realized that the way I was trying to access the data was incorrect. I will post my answer.
– TJ Weems
Nov 22 '18 at 14:35
What do you see if you log
mutation.type in your watcher. Does the mutation you want to act on come by? Could it possibly be prefixed with the module name you are using? If it works after a refresh, do you use the same code path to set the abilities there too?– Sumurai8
Nov 22 '18 at 8:47
What do you see if you log
mutation.type in your watcher. Does the mutation you want to act on come by? Could it possibly be prefixed with the module name you are using? If it works after a refresh, do you use the same code path to set the abilities there too?– Sumurai8
Nov 22 '18 at 8:47
@Sumurai8, thank you for the help, so when I console logged the
mutation.payload I realized that the way I was trying to access the data was incorrect. I will post my answer.– TJ Weems
Nov 22 '18 at 14:35
@Sumurai8, thank you for the help, so when I console logged the
mutation.payload I realized that the way I was trying to access the data was incorrect. I will post my answer.– TJ Weems
Nov 22 '18 at 14:35
add a comment |
1 Answer
1
active
oldest
votes
Once again answering my own question. Lol
So after console loggin my mutation.payload I realized I was trying to access the data incorrecly.
I switched
case 'createSession':
ability.update(mutation.payload.rules)
break
to this
case 'createSession':
ability.update(mutation.payload[0])
break
answered Nov 22 '18 at 14:37
TJ WeemsTJ Weems
157110
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424529%2fhow-to-watch-mutation-in-vuex-plugin%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Once again answering my own question. Lol
So after console loggin my mutation.payload I realized I was trying to access the data incorrecly.
I switched
case 'createSession':
ability.update(mutation.payload.rules)
break
to this
case 'createSession':
ability.update(mutation.payload[0])
break
answered Nov 22 '18 at 14:37
TJ WeemsTJ Weems
157110
add a comment |
Once again answering my own question. Lol
So after console loggin my mutation.payload I realized I was trying to access the data incorrecly.
I switched
case 'createSession':
ability.update(mutation.payload.rules)
break
to this
case 'createSession':
ability.update(mutation.payload[0])
break
answered Nov 22 '18 at 14:37
TJ WeemsTJ Weems
157110
add a comment |
Once again answering my own question. Lol
So after console loggin my mutation.payload I realized I was trying to access the data incorrecly.
I switched
case 'createSession':
ability.update(mutation.payload.rules)
break
to this
case 'createSession':
ability.update(mutation.payload[0])
break
answered Nov 22 '18 at 14:37
TJ WeemsTJ Weems
157110
Once again answering my own question. Lol
So after console loggin my mutation.payload I realized I was trying to access the data incorrecly.
I switched
case 'createSession':
ability.update(mutation.payload.rules)
break
to this
case 'createSession':
ability.update(mutation.payload[0])
break
answered Nov 22 '18 at 14:37
TJ WeemsTJ Weems
157110
answered Nov 22 '18 at 14:37
TJ WeemsTJ Weems
157110
answered Nov 22 '18 at 14:37
TJ WeemsTJ Weems
157110
answered Nov 22 '18 at 14:37
TJ WeemsTJ Weems
157110
157110
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424529%2fhow-to-watch-mutation-in-vuex-plugin%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What do you see if you log
mutation.typein your watcher. Does the mutation you want to act on come by? Could it possibly be prefixed with the module name you are using? If it works after a refresh, do you use the same code path to set the abilities there too?– Sumurai8
Nov 22 '18 at 8:47
@Sumurai8, thank you for the help, so when I console logged the
mutation.payloadI realized that the way I was trying to access the data was incorrect. I will post my answer.– TJ Weems
Nov 22 '18 at 14:35