Обновление: Мутация получит магазин, а не состояние - PullRequest
Новая
       49

Обновление: Мутация получит магазин, а не состояние

0 голосов
/ 03 мая 2018

В этом сообщении есть обновление, смотрите первый ответ

Итак, во-первых, я искал похожие проблемы (и нашел несколько тем), но ничего не решило мою проблему. Я пытаюсь использовать квазар-фреймворк впервые, и, возможно, я заблудился где-то в пространствах имен или что-то в этом роде.

Итак, сначала немного информации: + У меня нет ошибок при компиляции с ESLint
+ У меня нет ошибок в консоли javascript во время выполнения
Моя проблема:
+ Мои действия и мутация сохраняют что-то в магазине, но не там, где нужно (см. Скриншот в конце поста)
+ Мое средство получения не работает и отображается как «неопределенное» в инструменте разработки vue

Мой магазин организован так: 

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

Код корневого индекса.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
}

Код для мутаций.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')
}

Код, с которого я пытаюсь получить к нему доступ (в вычисляемом поле getPageTitle): 

<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, вы можете видеть, что значение было установлено при срабатывании hook (), но не в состоянии, а метод получения не определен.

Скриншот из плагина vue dev

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Обновление: решено, см. Выбранный ответ

Итак, я решил свою проблему. Казалось бы, первый аргумент, отправленный моей мутации, - это не состояние, а само хранилище. Итак:

Это не работает 

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
}

Это нормальное поведение? Док, кажется, говорит, что первым аргументом должно быть само государство.

0 голосов
/ 03 мая 2018

Ваш объект состояния выглядит так: 

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

И все это передается в ваш параметр состояния геттера. Весь этот экспортируемый объект - это ваше состояние, а не свойство "state" внутри него. Итак, у вас есть два варианта:

Вариант 1: обновите ваш метод получения, чтобы получить доступ к вложенному свойству "state" в вашем штате: 

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

Второй вариант (возможно, именно то, что вы действительно хотите сделать) : измените свой объект состояния, чтобы он не имел свойства "state". 

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