初识vue 2.0：vuex组件通信

Posted 2020-10-01 自娱自乐

0，本来想只用vue就可以做项目了，后来发现不行；一个网页被切分成若干个组件，组件之间是需要数据传递的，因此引入了vuex这个集中式存储、管理的状态管理模式。

1，安装vuex：

npm install --save vuex

 在main.js中引入：

import Vuex from ‘vuex‘
Vue.use(Vuex)

2，创建数据源文件vuex/store.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

const store = new Vuex.Store({
    // 定义状态
    state: {      
        msg: ‘我是Hello模块‘
    },
    // 改变状态
    mutations: {
        setMsg(state,msg){
            state.msg = msg
        }
    }
})

export default store

并在main.js 中引入

import store from ‘./vuex/store‘
Vue.prototype.$store = store

 3，重写hello.vue，使用vuex管理的状态变量

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
    <ul>
      <li><a href="#/game">我是一个链接</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: ‘hello‘,
  data () {
    return {
      msg: this.$store.state.msg //我是Hello模块
    }
  }
}
</script>

4，在 game.vue 中改变这个状态变量的值

<template>
  <div class="game">
    <h2>{{ msg }}</h2>
    <ul>
      <li><a href="#/">返回</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: ‘game‘,
  data () {
    return {
      msg: ‘我是Game模块‘
    }
  },
  mounted:function(){
	this.sendMsg()
  },
  methods:{
    sendMsg:function(e){
        this.$store.commit(‘setMsg‘,this.msg);//改变状态
    }
  }
}

</script>

 hello.vue中的msg被重新设置。

 

解决了组件之间的通信问题，就可以大胆地合理规划组件拉。^_^