问

javascript - vuex平行组件简单传值问题

nct6778550 发布于 2022-11-27 03:11

vue

文件

input

import

用vuex，简单的二个平行组件值传递的问题

关键的三个文件位置如上：

a.vue:

b.vue:

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        message: ''
    },
    mutations: {
        updateMessage(state, message) {
            state.message = message
        }
    }
})
export {
    store
}

预期想要的效果是在组件a里输入值，然后在组件b里可以获取（显示）到a组件里输入的值。不知道哪里出错了，由于刚看vuex，所以不要嫌我问的问题简单，嘿嘿。

2 个回答

this.$store

a.vue:
computed: {
```
message: this.$store.state.message
```
},
methods: {
updateMessage (e) {
```
this.$store.commit('updateMessage', e.target.value)
```
}
}
2022-11-27 04:17 回答

mobiledu2502874455

我讲下常规流程。

main.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import store from './store'

new Vue({
  el: '#app',
  store, // 这里是关键代码。 
  render: h => h(App)
})

组件内使用

import { mapState } from 'vuex'

export default {
    .... 省略代码
    computed: mapState({
        msg: state => state.message
    })
    .... 省略代码
}

或者

export default {
    .... 省略代码
    computed:{
        msg: this.$store.state.message
    } 
    .... 省略代码
}

另外，官方demo讲得很详细，请研究下代码
https://github.com/vuejs/vuex...

2022-11-27 04:17 回答

飘雪2502923303

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签

javascript - vuex平行组件简单传值问题

信息是:{{msg}}