javascript - 更新 : Mutation recieve the store, 不是状态

Question

本帖有更新，看第一个回答

所以，首先，我确实搜索了类似的问题(并找到了一些线程)，但没有解决我的问题。我是第一次尝试使用 quasar 框架，也许我在命名空间的某个地方迷路了。

所以，首先，一些信息:+用ESLint编译没有报错
+我的 javascript 控制台在运行时没有任何错误
我的问题是:
+我的 Action 和突变确实在商店里保存了一些东西，但不是在它应该保存的地方(见帖子末尾的截图)
+我的getter好像不起作用，在vue dev工具中显示为“undefined”

我的商店是这样组织的:

+store [folder]  
+ index.js  
+ app-utils [folder]  
--+ index.js  
--+ getters.js  
--+ actions.js  
--+ mutations.js  
--+ state.js  

根index.js代码:
从 'vue' 导入 Vue 从 'vuex' 导入 Vuex

import appUtils from './app-utils'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    appUtils
  }
})

export default store

然后，在“app-utils”文件夹中:index.js 的代码:

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

state.js 代码:

export default {
  state: {
    currentPageTitle: 'Hello'
  }
}

getters.js 代码:

export const getPageTitle = (state) => {
  console.log('GET TITLE: ' + state.currentPageTitle)
  return state.currentPageTitle
}

mutations.js 代码:

export const setPageTitle = (state, newPageTitle) => {
  console.log('MUTATION SET TITLE: ' + newPageTitle)
  state.currentPageTitle = newPageTitle
}

export const deletePageTitle = (state) => {
  console.log('MUTATION DELETE TITLE')
  state.currentPageTitle = ''
}

actions.js 代码:

export const setPageTitle = (context, newPageTitle) => {
  console.log('ACTION SET TITLE: ' + newPageTitle)
  context.commit('setPageTitle', newPageTitle)
}

export const deletePageTitle = (context) => {
  console.log('ACTION DELETE TITLE')
  context.commit('deletePageTitle')
}

我尝试访问它的代码(int the getPageTitle computed field):

<template>
  <q-page>
    <q-resize-observable @resize="onResize" /> TITLE : {{getPageTitle}}
    <div class="row">
    </div>
  </q-page>
</template>


import { mapGetters, mapActions } from 'vuex'

export default {
  data: () => ({
    pageSize: {
      height: 0,
      width: 0
    }
  }),
  mounted () {
    this.setPageTitle('Template manager')
  },
  destroyed () {
    this.deletePageTitle()
  },
  computed: {
    ...mapGetters('appUtils', [
      'getPageTitle'
    ])
  },
  methods: {
    ...mapActions('appUtils', [
      'setPageTitle',
      'deletePageTitle'
    ]),
    onResize (size) {
      this.pageSize = size
    }
  }
}
</script>

<style>
</style>

最后是vue插件的截图，可以看到在触发mounted()钩子(Hook)时已经设置了值，但不是在'state'中，getter是未定义的。

Screenshot from the vue dev plugin

Answer 1

你的状态对象看起来像这样:

export default {
  state: {
    currentPageTitle: 'Hello'
  }
}

整个事情都被传递给你的 getter 状态参数。整个导出的对象是您的状态，而不是其中的“状态”属性。所以你有两个选择:

选项一:更新您的 getter 以访问您所在州内嵌套的“州”属性:

export const getPageTitle = (state) => {
  console.log('GET TITLE: ' + state.state.currentPageTitle)
  return state.state.currentPageTitle
}

选项二(可能是您真正想要做的):将您的状态对象更改为不具有“state”属性。

export default {
  currentPageTitle: 'Hello'
}