Vuex原理解析（简易版）

最新推荐文章于 2024-03-10 07:54:15 发布

不忘初心L

最新推荐文章于 2024-03-10 07:54:15 发布

阅读量159

点赞数

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

本文链接：https://blog.csdn.net/weixin_46379498/article/details/109505056

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

查看vuex源码

github上vuex源码

Vuex 的原理关键：使用 Vue 实例管理状态（放在vue响应式系统），dep通知watcher更新

简化版代码解析

<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>

不忘初心L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuex原理解析（简易版）

查看vuex源码github上vuex源码Vuex 的原理关键：使用 Vue 实例管理状态（放在vue响应式系统），dep通知watcher更新简化版代码解析<html> <head> <title>vuex 原理解析</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>
复制链接

扫一扫