Vue组件通信及状态管理

前言

本文主要说明Vue的核心内容---组件间的通信。文中将使用几个栗子来了解，本文示例基于Vue2.0。

• 父子组件间的通信
• 单一事件中心管理组件通信
• 集中式管理数据Vuex

父子组件间的通信---props

使用子组件获取父组件的数据

  
    
    
  
  
    

      我是父组件 ---- {{msg}}
      
    
    
    
  
  
  

效果

image.png

使用子组件修改父组件的数据

vue不允许子组件直接给父组件的对象赋值，如果需要修改父组件的数据，则需要
父组件每次传一个对象给子组件，使用对象之间引用（对对象中的属性赋值）

  
    
    
  
  
    

      我是父组件----{{giveData.msg}}
      
    

    

  
  
  

效果

image.png

点击修改数据按钮

image.png

vue

单一事件中心管理组件通信

核心内容

var Event= new Vue();

Event.on(数据名称，function(data){
//data
}.bind(this));

效果

image.png

image.png

状态管理Vuex

Vuex官网

Vuex提供的两个主要方法

• mapActions 管理所有时间（行为）
• mapGetters 获取数据

简单栗子（组建通信少时可以使用，组件通信多请看最后一个栗子）

创建项目（此处不多说明）具体看官网
安装Vuex

npm install vuex -D

目录结构

image.png

App.vue

main.js

import Vue from 'vue'
import App from './App.vue'

//引入store
import store from './store.js'

new Vue({
    store,
  el: '#app',
  render: h => h(App)
})

新建一个store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

var state={//数据
    count:10
};

const mutations={//处理数据（状态）变化
    increment(state){
        state.count++;
    },
    decrement(state){
        state.count--;
    },
};

const actions = {//处理你要干什么（异步请求，判断，流程控制）
    increment:({commit})=>{
        commit('increment')//提交到mutations
    },
    decrement:({commit})=>{
        commit('decrement')
    },
    clickOdd:({commit,state})=>{
        if(state.count%2==0){
            commit('increment')
        }
    },
    clickAsync:({commit})=>{//异步
        new Promise((resolve)=>{
            setTimeout(function(){
                commit('increment');
                resolve();
            },1000)
        })
    }
};

const getters={//mapGetters获取到的数据
    count(state){
        return state.count
    },
    getOdd(state){
        return state.count%2==0?'偶数':'奇数'
    }
};

//导出store对象
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

效果

image.png

Vuex

目录结构（把store单独放在一个文件夹，次项目就是把上面项目的store分开管理）

image.png

app.vue

main.js

import Vue from 'vue'
import App from './App.vue'

//引入store文件夹
import store from './store/'

new Vue({
    store,
  el: '#app',
  render: h => h(App)
})

新建store文件夹，并新建以下几个js文件
新建index.js文件（此文件为入口文件）

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

import actions from './actions'
import mutations from './mutations'

export default new Vuex.Store({
    modules:{
        mutations
    },
    actions
});

新建actions.js（处理异步请求，判断，流程控制等）

import * as types from './types'
export default{
    increment:({commit})=>{
        commit(types.INCREMENT);
    },
    decrement:({commit})=>{
        commit(types.DECREMENT);
    },
    clickOdd:({commit,state})=>{
        if(state.mutations.count%2==0){
            commit(types.INCREMENT);
        }
    },
    clickAsync:({commit})=>{
        new Promise((resolve)=>{
            setTimeout(function(){
                commit(types.INCREMENT);
            },1000);
        })
    }
}

新建mutations.js（处理数据/状态变化）

import * as types from './types'
import getters from './getters'

const state={
    count:20
};

const mutations={
    [types.INCREMENT](state){
        state.count++;
    },
    [types.DECREMENT](state){
        state.count--;
    }
};

export default{
    state,
    mutations,
    getters
}

新建getters.js（mapGetters获取到的数据）

export default{
    count:(state)=>{
        return state.count
    },
    getOdd:(state)=>{
        return state.count%2==0?'偶数':'奇数'
    }
}

新建types.js

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

效果

image.png

注：本文内容参考于智能社，在此感谢！

By：Yimi-珊