Vue.js 如何在Vuex插件中观察变异
我尝试使用的插件有问题。请注意,刷新页面后代码工作正常,但在初始登录时,设置为监视createSession的代码没有正确响应。我不确定是否有人熟悉这个软件包,但我不认为有什么问题,但也许我需要做一些事情来让插件正常工作 下面是plugin ability.jsVue.js 如何在Vuex插件中观察变异,vue.js,vuex,casl,Vue.js,Vuex,Casl,我尝试使用的插件有问题。请注意,刷新页面后代码工作正常,但在初始登录时,设置为监视createSession的代码没有正确响应。我不确定是否有人熟悉这个软件包,但我不认为有什么问题,但也许我需要做一些事情来让插件正常工作 下面是plugin ability.js import { Ability } from '@casl/ability' export const ability = new Ability() export const abilityPlugin = (store) =&
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
}
这是我要进口的商店
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
},
}
我正在使用来自初始登录操作的响应数据创建createSession,在这里检索令牌和规则
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)
})
})
},
任何帮助都将不胜感激!!我在这个问题上陷入了一段时间。再次回答我自己的问题。哈哈 所以在控制台记录了我的变种有效载荷后,我意识到我试图不正确地访问数据 我换了
case 'createSession':
ability.update(mutation.payload.rules)
break
对此
case 'createSession':
ability.update(mutation.payload[0])
break
如果你记录了变异,你会看到什么。输入你的观察者。你想对之采取行动的基因突变是来自哪里?它是否可能以您正在使用的模块名称作为前缀?如果它在刷新后工作,你是否也使用相同的代码路径来设置那里的能力?@Sumurai8,谢谢你的帮助,所以当我控制台记录了mutation.payload时,我意识到我试图访问数据的方式是不正确的。我会发布我的答案。