聊聊Vuex原理

背景

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。如果你已经灵活运用，但是依然好奇它底层实现逻辑，不妨一探究竟。

Vue 组件开发

我们知道开发 Vue 插件，安装的时候需要执行 Vue.use(Vuex)

import Vue from 'vue'
import Vuex from '../vuex'

Vue.use(Vuex)
1
2
3
4

通过查看 Vue API Vue-use 开发文档，我们知道安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当 install 方法被同一个插件多次调用，插件将只会被安装一次。

为了更好了的去理解源码意思，这里写了一个简单的测试实例。

测试实例代码

import Vue from 'vue'
import Vuex from '../vuex'

Vue.use(Vuex)

export default new Vuex.Store({
   
  plugins: [],
  state: {
   
    time: 1,
    userInfo: {
   
      avatar: '',
      account_name: '',
      name: ''
    },
  },
  getters: {
   
    getTime (state) {
   
      console.log('1212',state)
      return state.time
    }
  },
  mutations: {
   
    updateTime(state, payload){
   
      state.time = payload
    }
  },
  actions: {
   
    operateGrou({
     commit }) {
   
      // commit('updateTime', 100)
      return Promise.resolve().then(()=>{
   
        return {
   
          rows: [1,2,3]
        }
      })
    }
  },
  modules: {
   
    report: {
   
      namespaced: true,
      state: {
   
        title: '',
      },
      getters: {
   
        getTitle (state) {
   
          return state.title
        }
      },
      mutations: {
   
        updateTitle(state, payload){
   
          state.title = payload
        }
      },
      actions: {
   
        operateGrou({
     commit }) {
   
          commit('updateTitle', 100)
          return Promise.resolve().then(()=>{
   
            return {
   
              rows: [1,2,2,3]
            }
          })
        }
      },
      modules: {
   
        reportChild: {
   
          namespaced: true,
          state: {
   
            titleChild: '',
          },
          mutations: {
   
            updateTitle(state, payload){
   
              state.title = payload
            }
          },
          actions: {
   
            operateGrou({
     commit }) {
   
              commit('updateTitle', 100)
              return Promise.resolve().then(()=>{
   
                return {
   
                  rows: [1,2,2,3]
                }
              })
            }
          },
        }
      }
    },
    part: {
   
      namespaced: true,
      state: {
   
        title: '',
      },
      mutations: {
   
        updateTitle(state, payload){
   
          state.title = payload
        },
        updateTitle1(state, payload){
   
          state.title = payload
        }
      },
      actions: {
   
        operateGrou({
     commit }) {
   
          commit('updateTitle', 100)
          return Promise.resolve().then(()=>{
   
            return {
   
              rows: [1,2,2,3]
            }
          })
        }
      },
      modules: {
   
        partChild: {
   
          namespaced: true,
          state: {
   
            titleChild: '',
          },
          getters: {
   
            getTitleChild (state) {
   
              return state.titleChild
            }
          },
          mutations: {
   
            updateTitle(state, payload){
   
              state.titleChild = payload
            }
          },
          actions: {
   
            operateGrou({
     commit }) {
   
              commit
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181