Javascript 更新：接收存储，而不是状态

此帖子有更新，请参见第一个答案

因此，首先，我确实搜索了类似的问题（并找到了一些线程），但没有解决我的问题。我第一次尝试使用类星体框架，也许我在名称空间或其他什么地方迷路了

因此，首先，一些信息： +使用ESLint编译时，我没有任何错误
+我的javascript控制台在运行时没有任何错误
我的问题是：
+我的行为和变异确实会在商店里保存一些东西，但不会保存在应该保存的地方（请参见文章末尾的屏幕截图）
+我的getter似乎不起作用，在vue开发工具中显示为“未定义”

我的商店是这样组织的：

+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
}

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

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

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 = ''
}

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

<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>

state.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
}

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

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

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 = ''
}

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

<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>

getters.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
}

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

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

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 = ''
}

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

<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>

突变代码.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
}

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

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

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 = ''
}

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

<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>

actions.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
}

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

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

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 = ''
}

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

<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>

我试图访问它的代码（在getPageTitle计算字段中）：

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
}

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

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

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 = ''
}

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

<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>

标题：{{getPageTitle}}
从“vuex”导入{MapGetter，mapActions}
导出默认值{
数据：（）=>({
页面大小：{
高度:0,，
宽度：0
}
}),
挂载（）{
this.setPageTitle（'模板管理器'）
},
销毁（）{
this.deletePageTitle（）
},
计算：{
…映射获取程序（'appUtils'[
“getPageTitle”
])
},
方法：{
…映射操作（'appUtils'[
“setPageTitle”，
“deletePageTitle”
]),
onResize（大小）{
this.pageSize=大小
}
}
}

最后，从vue插件的屏幕截图中，您可以看到在触发mounted（）钩子时已设置了值，但未处于“状态”，并且getter未定义

---

您的状态对象如下所示：

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

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

选项一：更新getter以访问状态中的嵌套“state”属性：

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

选项二（可能是您真正想要做的）：将state对象更改为不具有“state”属性

export default {
  currentPageTitle: 'Hello'
}

---

更新：已解决，请参阅所选答案

所以我解决了我的问题。似乎发送到我的变种的第一个参数不是状态，而是存储本身。因此：

这不起作用

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

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

这很有效

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

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

---

这是正常的行为吗？医生似乎说第一个参数应该是状态本身。

谢谢，我刚刚找到了解决方案，但不知道发生了什么。在不知道任何javascript的情况下使用vue.js和quasar对我来说有点难！谢谢你的解释