javascript - Electron vue : store properties set but not rendering (VUEX)

Question

各位，

我正在开始 electro-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> 

我已经在我的 store.js 中定义了 titleName 属性，它位于 ./store/modules/store.js 和内容相同的:

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

export default {
  state
}

一切正常:从某种意义上说，我在 vue-devtools 控制台中没有收到任何错误/警告消息。我可以在控制台中看到 store.js 中定义的 vuex 状态。但是，我没有得到组件中呈现的标题。

我的理解是 mapState 从存储中获取属性并绑定(bind)到组件中的变量。有了这种理解，我没有定义 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

Answer 1

首先，我认为您应该将模块命名为与 state 不同的名称，以避免将来混淆:)。我将在下面使用名称“your_module_name”。

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

或者您可以使模块命名空间并使用它:

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

是的，非命名空间模块的 mapState 行为并不明显。