Electron-Vue: хранить свойства установлены, но не рендеринга (VUEX) - PullRequest
Новая
       6

Electron-Vue: хранить свойства установлены, но не рендеринга (VUEX)

0 голосов
/ 15 сентября 2018

Народ,

Я начинаю программирование настольных приложений Electron-Vuejs.Я учусь, как vuex работает на примере самоучки.Вот моя проблема:

У меня есть компонент, шаблон которого, 

<template>                                                                       
<div id="wrapper">                                                             
 <main>                                                                       
  <div class="left-side">                                                    
    <span class="title">                                                     
      <h2>{{ titleName }}</h2>                                               
    </span>                                                                                                             
  </div>                                                                                                                                                 
 </main>


, соответствующий раздел сценария выглядит следующим образом, 

<script>                                                                        
import { mapState } from 'vuex'                                                 

export default {                                                                
  name: 'game-page',                                                                                                                         
  computed: mapState([ 'titleName' ]) // map this.title to store.state.title    
}  
</script>

Я определил свойство titleName в моем store.js, которое находится как ./store/modules/store.js и его содержимое: 

cont state = {
  titleName: 'Welcome to planet earth'
}

export default {
  state
}

Все работает отлично: в том смысле, что я не являюсьполучить любое сообщение об ошибке / предупреждение в консоли vue-devtools.Я мог видеть vuex состояния, определенные в store.js в консоли.Тем не менее, я не получаю название отображается в компоненте.

Насколько я понимаю, mapState выбирает свойство из хранилища и связывается с переменной в компоненте.С этим пониманием я не определил gettr, но, похоже, этого не происходит.

Я должен делать что-то глупое или упустить что-то очевидное.Может ли кто-нибудь пролить свет на то, как решить эту проблему?Vue-2.5.17 - это то, что я использую.

РЕДАКТИРОВАТЬ: Это то, что мой index.js, 

import Vue from 'vue'
import Vuex from 'vuex'
import state from './modules/store.js'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    state
  },
  strict: process.env.NODE_ENV != 'production'
})

Моя структура каталогов, 

src
├── index.ejs
├── main
│   ├── index.dev.js
│   └── index.js
└── renderer
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── StonePaperScissors
    │   │   └── GameStates.vue
    │   └── StonePaperScissors.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── store
        ├── index.js
        ├── modules
            ├── index.js
            └── store.js

1 Ответ

0 голосов
/ 15 сентября 2018

Во-первых, я думаю, что вы должны назвать свой модуль чем-то отличным от state, чтобы избежать путаницы в будущем :).Я буду использовать имя «ваше_модуль_имя» ниже. 

import Vue from 'vue'
import Vuex from 'vuex'
import state from './modules/store.js'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    your_module_name: state
  },
  strict: process.env.NODE_ENV != 'production'
})

Если вы загрузите свое «хранилище» как модуль, но не будет содержать пространство имен , вы можете решить проблему, используя другую mapState подпись: 

computed: mapState({ titleName: state => state.your_module_name.titleName })

Или вы можете сделать модуль namespaced и использовать это: 

computed: mapState('your_module_name', ['titleName'])

Да, поведение mapState для модулей без пространства имен не очевидно.

...