vuex组件和组件传值

一、vuex组件和组件传值

a.vue:

<template>
  <div>
     <input type="text" :value='msg' @change='inputMsg'>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default({
computed:mapState({
  msg:state => state.msg
}),
methods:{
    inputMsg:function(e){
      this.$store.commit('SET_MSG',e.target.value)
      this.$router.push("/b")
    }
  }
})
</script>

b.vue:

<template>
    <div class="form-group">
    <h1>信息是:{{msg}}</h1>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default{
       computed:mapGetters({
           msg:'GET_MSG'
       })
}
</script>

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        user_name: ''
    },
    mutations: {
        "SET_MSG": function(state, user_name) {
            state.user_name = user_name
            console.log('保存', state.user_name)
        }
    },
    getters: {
        "GET_MSG": function(state) {
            console.log('获取', state.user_name)
            return state.user_name
        }
    },
    actions: {
        "SET_MSG": function(state, user_name) {
            console.log('获取', state.user_name)
            store.commit("SET_MSG", user_name)
        }
    }
})
export default store

参考：https://segmentfault.com/q/1010000008980639