VueX详解及如何实现持久化

矫情吗；* 2022-09-02 08:34 204阅读 0赞

> vueX 中的states 在浏览器刷新后 会重置回 原属性值,并不会保留操作值.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

# Mutation： #

更改 Vuex的store 中状态的唯一方法 就是提交mutation 。  
每个mutation 都有一个字符串的事件类型 和 回调函数。如以下 的 changeState就是。

定义在 mutation 里的不可以被直接调用，需要`store.commit('changeState')`的方式进行触发

#### commit源码： ####

commit (_type, _payload, _options) { 
        // check object-style commit
        const { 
          type,
          payload,
          options
        } = unifyObjectStyle(_type, _payload, _options)
    
        const mutation = {  type, payload }
        const entry = this._mutations[type]
        if (!entry) { 
          if (__DEV__) { 
            console.error(`[vuex] unknown mutation type: ${ type}`)
          }
          return
        }
         // 专用修改state方法，其他修改state方法均是非法修改
        this._withCommit(() => { 
          entry.forEach(function commitIterator (handler) { 
            handler(payload)
          })
        })
        // 订阅者函数遍历执行，传入当前的mutation对象和当前的state
        this._subscribers
          .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
          .forEach(sub => sub(mutation, this.state))
    
        if (
          __DEV__ &&
          options && options.silent
        ) { 
          console.warn(
            `[vuex] mutation type: ${ type}. Silent option has been removed. ` +
            'Use the filter functionality in the vue-devtools'
          )
        }
      }

# Action： #

涉及改变数据的，使用mutations 存在业务逻辑的 就用actions  
action 的提交类似于mutation，但是不同点在于 action不是直接改变状态，而提交的是mutation。 且action 可以包含任意异步操作。

action 函数接受一个 与store 实例具有相同方法和属性的 context 对象

Action 通过 store.dispatch 方法触发：

*  标准写法：

actions: { 
        increment (context) { 
          context.commit('increment')
        }
      }

*  常态写法：  
    用到参数解构 来简化代码

actions: { 
      increment ({ commit }) { 
        commit('increment')
      }
    }

#### dispatch 源码： ####

dispatch (_type, _payload) { 
        // check object-style dispatch
        const { 
          type,
          payload
        } = unifyObjectStyle(_type, _payload)
    
        const action = {  type, payload }
        const entry = this._actions[type]
        if (!entry) { 
          if (__DEV__) { 
            console.error(`[vuex] unknown action type: ${ type}`)
          }
          return
        }
    
        try { 
          this._actionSubscribers
            .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
            .filter(sub => sub.before)
            .forEach(sub => sub.before(action, this.state))
        } catch (e) { 
          if (__DEV__) { 
            console.warn(`[vuex] error in before action subscribers: `)
            console.error(e)
          }
        }
    
        const result = entry.length > 1
          ? Promise.all(entry.map(handler => handler(payload)))
          : entry[0](payload)
    
        return new Promise((resolve, reject) => { 
          result.then(res => { 
            try { 
              this._actionSubscribers
                .filter(sub => sub.after)
                .forEach(sub => sub.after(action, this.state))
            } catch (e) { 
              if (__DEV__) { 
                console.warn(`[vuex] error in after action subscribers: `)
                console.error(e)
              }
            }
            resolve(res)
          }, error => { 
            try { 
              this._actionSubscribers
                .filter(sub => sub.error)
                .forEach(sub => sub.error(action, this.state, error))
            } catch (e) { 
              if (__DEV__) { 
                console.warn(`[vuex] error in error action subscribers: `)
                console.error(e)
              }
            }
            reject(error)
          })
        })
      }

## 持久化构建： ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20220829/aa7a5e0b01b4448e9ff99678e71ec188.png