Vue中Vuex

最新推荐文章于 2024-07-03 15:31:30 发布

light169

最新推荐文章于 2024-07-03 15:31:30 发布

阅读量96

点赞数

分类专栏： Vue Javascript 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/light169/article/details/120592286

版权

Vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Javascript

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vuex解决Vue.js应用中父子组件通讯的复杂性。通过对比传统的props传递方式，展示了Vuex如何让状态管理变得更加简单。在示例中，父组件和子组件通过Vuex共享状态，从而避免了繁琐的事件传递。Vuex使得在多个组件间共享和更新数据变得直观且高效。

摘要由CSDN通过智能技术生成

Vue.js——十分钟入门Vuex

vuex最简单、最详细的入门文档

一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :

<!--父组件中引入子组件-->
<template>
  <div>
    <a href="javascript:;" @click="show = true">点击</a>
    <t-dialog :show.sync="show"></t-dialog>
  </div>
</template>

<script>
import dialog from './components/dialog.vue'
export default {
  data(){
    return {
      show:false
    }
  },
  components:{
    "t-dialog":dialog
  }
}
</script>


<!--子组件-->
<template>
  <el-dialog :visible.sync="currentShow"></el-dialog>
</template>

<script>
export default {
  props:['show'],
  computed:{
      currentShow:{
          get(){
              return this.show
          },
          set(val){
              this.$emit("update:show",val)
          }
      }
  }
}
</script>

之所以这么麻烦 , 是因为父组件可以通过 props 给子组件传递参数 , 但子组件内却不能直接修改父组件传过来的参数。

这时候 , 使用 vuex 就可以比较方便的解决这种问题了 :

<!--父组件中引入子组件-->
<template>
  <div>
    <a href="javascript:;" @click="$store.state.show = true">点击</a>
    <t-dialog></t-dialog>
  </div>
</template>

<script>
import dialog from './components/dialog.vue'
export default {
  components:{
    "t-dialog":dialog
  }
}
</script>


<!--子组件-->
<template>
  <el-dialog :visible.sync="$store.state.show"></el-dialog>
</template>

<script>
export default {}
</script>