![](/img/trans.png)
[英]Strange behavior of Vuex mutations in Electron app based on electron-vue
[英]electron-vue: store properties set but not rendering (VUEX)
民间,
我正在开始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
控制台中未收到任何错误/警告消息。 我可以看到控制台中store.js
中定义的vuex
状态。 但是,我没有在组件中显示标题。
我的理解是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
行为并不明显。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.