# Vuex 原理解析

<html>

<head>
    <title>vuex 原理解析</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="root">{{data}}</div>
    <div id="root2">{{data2}}</div>
    <div id="root3">
        <button @click="change">change</button>
    </div>
    <script>
    function registerPlugin(Vue) {
        const vuex = {}
        vuex._vm = new Vue({
            data: {
                message: 'hello vue.js'
            }
        })
        vuex.state = vuex._vm
        vuex.mutations = {
            setMessage(value) {
                vuex.state.message = value
            }
        }

        function init() {
            this.$store = vuex
        }
        Vue.mixin({
            beforeCreate: init
        })
    }
    Vue.use(registerPlugin)
    new Vue({
        el: '#root',
        computed: {
            data() {
                return this.$store.state.message
            }
        }
    })
    new Vue({
        el: '#root2',
        computed: {
            data2() {
                return this.$store.state.message
            }
        }
    })
    new Vue({
        el: '#root3',
        methods: {
            change() {
                const newValue = this.$store.state.message + '.'
                this.$store.mutations.setMessage(newValue)
            }
        }
    })
    </script>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66