首页 > 代码库 > 初识vue 2.0（4）：vuex组件通信
初识vue 2.0（4）：vuex组件通信
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="http://www.mamicode.com/#/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="http://www.mamicode.com/#/">返回</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被重新设置。
解决了组件之间的通信问题，就可以大胆地合理规划组件拉。^_^
初识vue 2.0（4）：vuex组件通信
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。