巧妙利用Vue.mixin()实现Vuex

最新推荐文章于 2024-02-25 12:49:53 发布

冬天爱吃冰淇淋

最新推荐文章于 2024-02-25 12:49:53 发布

阅读量577

点赞数

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

本文链接：https://blog.csdn.net/weixin_44823731/article/details/106454262

版权

vue 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

vuex

1 篇文章 0 订阅

订阅专栏

实现原理：Vue.mixin()和Vue实例很相似，就是它也有生命周期函数。不过它的生命周期很特别，执行的时候，所有Vue实例和组件都会调用它的生命周期函数。利用这一特点，我们可以实现Vuex。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 第一个vue实例：访问this.$store.state上的属性 -->
    <div id="app">{{data}}</div>
    <!-- 第二个vue实例：访问this.$store.state上的属性 -->
    <div id="app1">{{data}}</div>
    <!-- 第三个vue实例：调用this.$store.mutations上的方法 -->
    <div id="app2">
        <button @click="changMsg">改变msg</button>
        <!-- 组件中使用this.$store.state中的属性 -->
        <test></test>
    </div>

</body>
<script>
    function setVuex(vm) {
        // 1.定义一个vuex变量
        let vuex = {}
        // 2.实例化一个Vue，无需指定dom区域，用vuex.vm接收
        vuex.vm = new Vue({
            data: {
                msg: 'hello world'
            }
        })
        // 3.将vuex.state指向vuex.vm。
        // 我们需要知道：vue会把data中的数据绑定到实例上，所以我们平常在vue实例中可以通过this点出data中的数据。
        vuex.state = vuex.vm
        // 4.添加mutations属性
        vuex.mutations = {
            setMsg(val) {
                vuex.state.msg = val
            }
        }
        // 5.使用Vue.mixin的beforeCreate生命周期函数。每个Vue实例和组件都会调用
        Vue.mixin({
            beforeCreate: function () {
                // 利用this将vuex添加到vue实例和组件的data.$store中
                console.log(this)
                this.$store = vuex
            }
        })
    }
    // Vue.use()的接收参数：方法或者对象。它会帮你执行你传给它的方法或者对象中的install方法。
    Vue.use(setVuex)
    Vue.component('test', {
        template: '<div>{{data}}111</div>',
        computed: { // 通过计算属性显示数据到页面上
            data() {
                return this.$store.state.msg
            }
        }
    })
    new Vue({
        el: '#app',
        data: {

        },
        computed: {
            data() {
                return this.$store.state.msg
            }
        }
    })
    new Vue({
        el: '#app1',
        data: {

        },
        computed: {
            data() {
                return this.$store.state.msg
            }
        }
    })
    new Vue({
        el: '#app2',
        data: {

        },
        methods: {
            changMsg() { // 改变值
                this.$store.mutations.setMsg('5555')
            }
        }
    })
</script>

</html>