vue组件与组件之间的传值

场景：网站首页点击某些按钮的时候未登录需要弹出一个登陆窗口

vue项目因为有强大的组件功能，所以很多一个页面有很多个组件组成，而组件之间的数据通信就需要用到vuex

首先安装vuex

cnpm i vuex -s

接下来创建核心目录store,在跟目录src下创建文件夹store,stort文件夹下创建index.js文件

 

 之后引用挂载

main.js文件中(这里除了引入外new Vue中也需要挂载store不要忘了)

import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

store/index.js

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

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象

const store = new Vuex.Store({

    state: {

        loginshow: false//登陆窗口隐藏显示

    },

    mutations: {

        edit(state) {

            state.loginshow = !state.loginshow;

            console.log(state.loginshow);

        }

    }

})

export default store

之后可以使用了

<el-dialog
    title="登陆"
    :visible="this.$store.state.loginshow"
    class="login_div"
    id="login_div"
    ref="login"
    @close='close_login'
  >内容</el-dialog>

methods中

close_login(){
  this.$store.commit('edit')
},

 插入值

store/index.js

const store = new Vuex.Store({
    state: {
        loginshow: false,
        userData:''
    },
    mutations: {
        edit(state) {
            state.loginshow = !state.loginshow;
            console.log(state.loginshow);
        },
        setUser(state,playload){
            state.userData = playload;
        }
    }
})

*.vue的方法中

this.$store.commit('setUser',response.data.result);

注：全局变量是会随着页面刷新而初始化，所以如果想要刷新而保存全局变量，参考另一篇文章 vue刷新全局变量保存不消失