vuex 入门应用

最新推荐文章于 2025-05-19 15:27:00 发布

web_hj

最新推荐文章于 2025-05-19 15:27:00 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vuex

本文链接：https://blog.youkuaiyun.com/web_hj/article/details/85013852

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中引入并使用Vuex进行状态管理，包括安装Vuex、配置store、以及在父组件和子组件中使用store状态的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>