首页 文章

更新：变异接收商店，而不是国家

提问于
浏览 次
2

这篇文章有更新，请参阅第一个答案

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

所以，首先，一些信息：使用ESLint编译时没有任何错误
我在运行时的javascript控制台中没有任何错误
My problem is :
我的行为和变异确实在商店中保存了一些东西，但不是它应该存在的地方（见帖子末尾的截图）
我的getter似乎不起作用，并在vue dev工具中显示为"undefined"

我的商店组织如下：

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

Code of the root index.js :
从'vue'导入Vue从'vuex'导入Vuex

import appUtils from './app-utils'

Vue.use(Vuex)

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

export default store

Then, in the folder 'app-utils' : Code for 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
}

Code for state.js :

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

Code for getters.js :

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

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

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

The code from where i am trying to access it (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插件的截图，你可以看到在触发mount（）挂钩时设置了值，但是没有在'state'中设置，并且getter是未定义的 .

Screenshot from the vue dev plugin

javascript vue.js vuejs2 vuex quasar

2 回答

  • 2

    您的状态对象如下所示：

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

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

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

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

    选项二（可能你真正想做的事）：将状态对象更改为不具有"state"属性 .

    export default {
  currentPageTitle: 'Hello'
}
    回复于
  • 0

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

    所以我解决了我的问题 . 似乎发送给我突变的第一个参数不是状态，而是存储本身 . 所以：

    This does not work

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

    This works

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

    这是正常的行为吗？医生似乎说第一个论点应该是国家本身 .

    回复于

相关问题