如何在 Vuex 插件中观察突变答案

【问题标题】：How To Watch Mutation In Vuex Plugin如何在 Vuex 插件中观察突变
【发布时间】：2018-11-22 05:41:31
【问题描述】：

我尝试使用的插件有问题。请注意，刷新页面后代码可以正常工作，但是在初始登录时，它设置为观察的突变 (createSession) 没有正确响应。我不确定是否有人熟悉 CASL 包，但我认为问题不存在，但也许我需要做一些事情才能使插件正常工作。

这里是插件能力.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
  }

这是我要导入的商店

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)
          })
      })
    },

任何帮助将不胜感激！我在这个问题上卡了一段时间..

【问题讨论】：

如果您在观察者中登录mutation.type，您会看到什么。你想要采取行动的突变会来吗？它可能以您正在使用的模块名称为前缀吗？如果刷新后它可以工作，你是否也使用相同的代码路径来设置能力？
@Sumurai8，感谢您的帮助，所以当我在控制台登录mutation.payload 时，我意识到我尝试访问数据的方式不正确。我会发布我的答案。

标签： vue.js vuex casl

【解决方案1】：

再次回答我自己的问题。哈哈

所以在控制台登录我的mutation.payload 后，我意识到我试图错误地访问数据。

我换了

case 'createSession':
        ability.update(mutation.payload.rules)
        break

到这里

case 'createSession':
        ability.update(mutation.payload[0])
        break

【讨论】：