Vue2.X Vuex

最新推荐文章于 2024-04-04 17:34:22 发布

Jasivc

最新推荐文章于 2024-04-04 17:34:22 发布

阅读量159

点赞数

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

本文链接：https://blog.csdn.net/qq_36695838/article/details/114958070

版权

VUE 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue2.x Vuex

Vuex 共享数据
Vuex 修改数据
Vuex getters

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

微博：极客江南
微信公众号：李南江
腾讯课堂：李南江
网易云课堂：李南江

Vuex 共享数据

什么是Vuex?
vuex 是 Vue 配套的公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，
方便整个程序中的任何组件直接获取或修改我们的公共数据

注意点:
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上

html代码：

<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <son1 @parentchange="change"></son1>
        <son2 :parentnum="num"></son2>
    </div>
</template>
<template id="son1">
    <div>
        <!--需求: 在第一个子组件中添加两个按钮和一个输入框, 要求通过按钮控制输入框中的数据+1和-1-->
        <button @click="add">增加</button>
        <button @click="sub">减少</button>
        <input type="text" :value="count">
    </div>
</template>
<template id="son2">
    <div>
        <!--需求: 在第二个子组件中展示第一个子组件中的数据-->
        <!--
        注意点:
        1.如果想要在子组件中使用父组件中的数据, 那么必须通过父组件传递
        2.如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递
        3.兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件
        -->
        <!--
        注意点:
        虽然通过借助父组件能够实现兄弟组件之间的数据传递, 但是这种方式非常的复杂, 非常的不推荐
        那么当前在企业开发中我们遇到了两个问题:
        1.如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
        2.兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(非常麻烦)
        解决方案: 使用Vuex
        -->
        <p>{{parentnum}}</p>
    </div>
</template>

vue代码：

// 爸爸组件
Vue.component("father", {
  template: "#father",
  data: function(){
    return {
      num: 0
    }
  },
  methods: {
    change(newCount){
      this.num = newCount;
    }
  },
  // 儿子组件
  components: {
    "son1": {
      template: "#son1",
      data: function () {
        return {
          count: 0
        }
      },
      methods: {
        add(){
          /*
          如何实现儿子中的数据和父亲中的数据同步
          1.父亲给儿子传递一个方法
          2.在儿子中修改数据
          3.儿子中修改完数据, 调用父亲传递过来的方法, 并且将修改之后的数据传递给父亲的方法
          4.在父亲的方法中保存最新的数据
          * */
          this.count = this.count + 1;
          this.$emit("parentchange", this.count);
        },
        sub(){
          this.count = this.count - 1;
          this.$emit("parentchange", this.count);
        }
      }
    },
    "son2": {
      template: "#son2",
      props: ["parentnum"]
    }
  }
});
// 这里就是MVVM中的View Model
let vue = new Vue({
  el: '#app',
  // 这里就是MVVM中的Model
  data: {
  },
  // 专门用于存储监听事件回调函数
  methods: {
  },
  // 专门用于定义计算属性的
  computed: {
  },
  // 专门用于定义局部组件的
  components: {
  }
});

当前在企业开发中我们遇到了两个问题:
1、如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
2、兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(非常麻烦)
解决方案: 使用Vuex

什么是Vuex?
vuex 是 Vue 配套的公共数据管理工具，我们可以将共享的数据保存到 vuex 中，
方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据

注意点:
必须在引入Vue之后再引入Vuex
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上

导入Vuex代码：

<!-- 1.导入Vuex-->
<!--注意点: 在导入Vuex之前必须先导入Vue-->
<script src="js/vuex.js"></script>

html代码：

<div id="app">
    <grandfather></grandfather>
</div>
<template id="grandfather">
    <div>
        <p>{{this.$store.state.msg}}</p>
        <father></father>
    </div>
</template>
<template id="father">
    <div>
        <!--4.在使用Vuex中保存的共享数据的时候, 必须通过如下的格式来使用-->
        <p>{{this.$store.state.msg}}</p>
        <son></son>
    </div>
</template>
<template id="son">
    <div>
        <p>{{this.$store.state.msg}}</p>
    </div>
</template>

vue代码：

// 2.创建Vuex对象
    const store = new Vuex.Store({
        // 这里的state就相当于组件中的data, 就是专门用于保存共享数据的
        state: {
            msg: "知播渔"
        },
    });
    // 爷爷组件
    Vue.component("grandfather", {
        template: "#grandfather",
        // 3.在祖先组件中添加store的key保存Vuex对象
        // 只要祖先组件中保存了Vuex对象 , 那么祖先组件和所有的后代组件就可以使用Vuex中保存的共享数据了
        store: store,
        // 爸爸组件
        components: {
            "father": {
                template: "#father",
                // 儿子组件
                components: {
                    "son": {
                        template: "#son",
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        },
    });

Vuex 修改数据

html代码：

<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <son1></son1>
        <son2></son2>
    </div>
</template>
<template id="son1">
    <div>
        <!--需求: 在第一个子组件中添加两个按钮和一个输入框, 要求通过按钮控制输入框中的数据+1和-1-->
        <button @click="add">增加</button>
        <button @click="sub">减少</button>
        <input type="text" :value="this.$store.state.count">
    </div>
</template>
<template id="son2">
    <div>
<!--        <p>{{this.$store.state.count}}</p>-->
        <button @click="add">增加</button>
        <button @click="sub">减少</button>
        <input type="text" :value="this.$store.state.count">
    </div>
</template>

vue代码：

const store = new Vuex.Store({
    // state: 用于保存共享数据
    state: {
        count: 0
    },
    // mutations: 用于保存修改共享数据的方法
    mutations: {
        // 注意点: 在执行mutations中定义的方法的时候, 系统会自动给这些方法传递一个state参数
        //         state中就保存了共享的数据
        mAdd(state){
            state.count = state.count + 1;
        },
        mSub(state){
            state.count = state.count - 1;
        }
    }
});
// 爸爸组件
Vue.component("father", {
    template: "#father",
    store: store,
    // 儿子组件
    components: {
        "son1": {
            template: "#son1",
            methods: {
                add(){
                    // 注意点: 在Vuex中不推荐直接修改共享数据
                    // this.$store.state.count = this.$store.state.count + 1;
                    this.$store.commit("mAdd");
                },
                sub(){
                    // this.$store.state.count = this.$store.state.count - 1;
                    this.$store.commit("mSub");
                }
            }
        },
        "son2": {
            template: "#son2",
            methods: {
                add(){
                    // 注意点: 在Vuex中不推荐直接修改共享数据
                    // 如果多个组件都修改了共享的数据, 那么后期数据发生了错误, 我们如果需要去调试错误
                    // 就需要把每一个修改了共享数据的组件都检查一遍, 这样非常低效, 非常的不利于我们去维护
                    // this.$store.state.count = this.$store.state.count + 1;
                    this.$store.commit("mAdd");
                },
                sub(){
                    // this.$store.state.count = this.$store.state.count - 1;
                    this.$store.commit("mSub");
                }
            }
        }
    }
});
// 这里就是MVVM中的View Model
let vue = new Vue({
  el: '#app',
  // 这里就是MVVM中的Model
  data: {
  },
  // 专门用于存储监听事件回调函数
  methods: {
  },
  // 专门用于定义计算属性的
  computed: {
  },
  // 专门用于定义局部组件的
  components: {
  }
});

Vuex getters

什么是Vuex的getters?
Vuex的getters属性就和组件的计算属性一样, 会将数据缓存起来, 只有数据发生变化才会重新计算

html代码：

<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
<!--        {{formart}}-->
<!--        {{formart}}-->
<!--        {{formart}}-->
<!--        {{this.$store.state.msg}} "www.it666.com"-->
<!--        {{this.$store.state.msg}} "www.it666.com"-->
<!--        {{this.$store.state.msg}} "www.it666.com"-->
        {{this.$store.getters.formart}}
        {{this.$store.getters.formart}}
        {{this.$store.getters.formart}}
    </div>
</template>

vue代码：

const store = new Vuex.Store({
    // state: 用于保存共享数据
    state: {
        msg: "知播渔"
    },
    // mutations: 用于保存修改共享数据的方法
    mutations: {
    },
    getters: {
        formart(state){
            console.log("getters方法被执行了");
            return state.msg + "www.it666.com"
        }
    }
});
// 爸爸组件
Vue.component("father", {
    template: "#father",
    store: store,
    // data: function () {
    //     return {
    //         msg: "知播渔"
    //     }
    // },
    // computed: {
    //     formart(){
    //         console.log("计算属性的方法被执行了");
    //         return this.msg + "www.it666.com";
    //     }
    // }
});
// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
    },
    // 专门用于存储监听事件回调函数
    methods: {
    },
    // 专门用于定义计算属性的
    computed: {
    },
    // 专门用于定义局部组件的
    components: {
    }
});

Jasivc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.X Vuex

Vue2.x Vuex写在前面：此博客记录自己学习vue学习笔记，如有侵权，联系删！学习来源： Vue + Vue-Cli 快速入门教程李南江老师各平台账号：微博：极客江南微信公众号：李南江腾讯课堂：李南江网易云课堂：李南江html代码：<div id="app">  <abc></abc></div>vue代码：// 1.创建组件构造器let Profile
复制链接

扫一扫