跨组件传值/同胞传值/modules模块化数据/mutations 状态的修改 --------大白话总结

最新推荐文章于 2022-12-27 16:54:48 发布

YPX_早起的鸟儿

最新推荐文章于 2022-12-27 16:54:48 发布

阅读量647

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/YPX_YGWW/article/details/121306166

版权

本文总结了Vue.js中使用Vuex进行状态管理的方法，包括跨组件传值、同胞传值、模块化数据管理和mutations状态修改。通过在store中设置state并引用，利用计算属性或直接调用state获取数据；同胞组件间利用事件总线EventBus传递数据；通过modules实现数据的模块化管理；最后介绍了如何通过mutations正确修改状态。

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

1.跨组件传值

1.(新建项目的时候,跟router的做法一样,选中vuex直接回车) 系统自动配置完会有store文件夹

方法一:
直接把数据放在store文件下,然后直接在想使用的地方
用 this.$store.state.数据名来读取

vue中代码全部:

    <template>
    <div class="about">
        <h1>跨组件传值==={
  {this.$store.state.name}}</h1>
    </div>
    </template>

方法二:
把数据放在store文件下,然后直接在想使用的地方
在计算属性中进行调用用 this.$store.state.数据名来读取

vue中代码全部:

    <template>
    <div class="about">
        <h1>计算属性方式取值--{
  {newname}}</h1>
    </div>
    </template>
    <script>
    export default {

            //在计算属性中进行读取
    computed:{
        newname(){
        return this.$store.state.name
        }
    }
    }
    </script>