vuex 入门应用

1.下载 

npm install vuex --save

 2.在main.js中 

import Vue from 'vue'
import vuex from 'vuex'         //  1

Vue.use(vuex)                  //  2

var store = new vuex.Store({   // 实例store对象    3
  state:{
    show:false
  }
})

new Vue({
  el: '#app',
  store,                     //4
  router,
  components: { App },
  template: '<App/>'
})

3.使用

父组件：

<template>
  <div>
    <button @click="$store.state.show = true">点击</button>   //这里用到main.js中定义的show
    <v_dialog></v-dialog>
  </div>
</template>

<script>
import v_dialog from './v_dialog.vue'
export default {
  components:{
    v_dialog
  }
}
</script>

子组件： 

<template>
  <el-dialog title="提示" :visible.sync="$store.state.show">   
     <span>这是一段信息</span>
     <span slot="footer" class="dialog-footer">
        <el-button @click="$store.state.show = false">取 消</el-button>
        <el-button type="primary" @click="$store.state.show = false">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
export default {}
</script>