伙计们,
我正在启动electronic-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
首先,我认为你应该将你的模块命名为与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
行为并不明显。