关于前端:谈谈数据状态管理和实现一个简易版vuex

10次阅读

共计 6102 个字符，预计需要花费 16 分钟才能阅读完成。

本文在 github 做了收录 github.com/Michael-lzg…
掘金同文：https://juejin.im/post/6866964944634511368

数据状态治理

首先说说什么叫“前端状态 ”。所有程序都有“状态”，状态体现在代码中的各种类型的变量，在程序运行的过程中产生扭转的过程，而咱们编写的程序就是在管制这些“状态”如何产生扭转。

为什么要进行数据状态治理

数据状态治理是近年随着在 React/Vue 等现代化的前端框架流行起来的，次要利用在单页利用 SPA(Single Page Application)中。在以前前端“刀耕火种”的年代还没有这种概念的。

前端技术在热火朝天地倒退，前端工作也越来越简单，现阶段的前端不在只是传统意义上的“切图仔”，更多地负责页面数据逻辑解决，原有的很多技术体系、解决方案曾经不能很好的撑持这些越来越简单的需要。而且，当初 Vue/React 等前端框架都是应用 MVVM 的设计模式，都是依附数据驱动视图的更新。

比方 Vue 应用了 Virtual DOM 的 思维。将 DOM 放到内存中，当 data 发生变化的时候，生成新的 Virtual DOM，再将它和之前的 Virtual DOM 通过一个 diff 算法进行比照，将被扭转的内容在浏览器中渲染，大大减少了对 DOM 的操作，晋升了前端性能。

其次数据管理逻辑和页面渲染逻辑拆散，使得代码更容易保护。操作数据的中央不会关怀页面如何展现，展现页面的中央不会关怀数据从哪里来的。

数据状态治理的办法

  • localStorage 和 sessionStorage : 适宜小量简略数据的存储
  • prop 和 $emit: 适宜父子组件传值
  • provide 和 inject: 容许一个先人组件向其所有子孙后代注入一个依赖
  • vuex: 全局数据状态治理，适宜数据简单的大型利用

Vuex

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化。

Vuex 解决了什么问题

  • 多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会十分繁琐，并且对于兄弟组件间的状态传递无能为力。
  • 来自不同组件的行为须要变更同一状态。以往采纳父子组件间接援用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式十分软弱，通常会导致无奈保护的代码。

五个外围属性

  • state：存储状态（变量）, 相当于 vue 的 data
  • getters：对数据获取之前的再次编译，能够了解为 state 的计算属性。咱们在组件中应用 $sotre.getters.fun()
  • mutations：批改状态，并且是同步的。在组件中应用$store.commit('',params)。相当于 vue 的 methods。
  • actions：异步操作。在组件中应用是$store.dispath('')
  • modules：store 的子模块，为了开发大型项目，不便状态治理而应用的。

state

state 是存储状态，它是一个对象。

const store = new Vuex.Store({
  state: {
    count: 10,
    price: 10,
  },
})

当一个组件须要获取多个状态时候，将这些状态都申明为计算属性会有些反复和冗余。为了解决这个问题，咱们能够应用 mapState 辅助函数帮忙咱们生成计算属性。

// 在独自构建的版本中辅助函数为 Vuex.mapState
import {mapState} from 'vuex'
export default {
  computed: mapState({count: (state) => state.count,
    price: (state) => state.price,
  }),
}

// 当映射的计算属性的名称与 state 的子节点名称雷同时，咱们也能够给 mapState 传一个字符串数组。computed: mapState(['count', 'price'])

getter

有时候咱们须要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数，这时候咱们就用到 getter 属性。

export default new Vuex.Store({
  state: {list: [1, 2, 3, 4]
  },
  getters: { //  这个次要是对状态的解决，相当于把状态解决的办法抽成公共局部来治理了
    filterArr(state) { // 一般化 getter
      return state.list.filter((item, index, arr) => {return item % 2 === 0;})
    },
    getLength(state, getter) { // 办法外面传 getter，调用 modifyArr 来计算长度
      return getter.filterArr.length;
    }
})

而后在组件中能够用计算属性 computed 来拜访这些派生转态。

computed: {list() {return this.$store.getters.filterArr},
}

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到部分计算属性，当咱们想在组件外面引入多个 getter 时，能够应用 mapGetters：

import {mapGetters} from 'vuex'
export default {
  computed: {...mapGetters(['filterArr', 'getLength']),
  },
}

mutation

更改 Vuex 的 store 中的状态的惟一办法是提交 mutation。 Vuex 中的 mutation 十分相似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。它会承受 state 作为第一个参数，提交载荷（Payload）作为第二个参数。

const store = new Vuex.Store({
  state: {count: 1,},
  mutations: {increment(state, n) {
      // 变更状态
      state.count += n
    },
  },
})

store.commit('increment', 10)

在大多数状况下，载荷应该是一个对象，这样能够蕴含多个字段并且记录的 mutation 会更易读：

mutations: {increment (state, payload) {state.count += payload.count}
}

store.commit('increment', {count: 10})

提交 mutation 的另一种形式是间接应用蕴含 type 属性的对象：

store.commit({
  type: 'increment',
  count: 10,
})

在组件中提交 Mutation 你能够在组件中应用 this.$store.commit('xxx') 提交 mutation，或者应用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（须要在根节点注入 store）。

import {mapMutations} from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    ]),
  },
}

Action

Action 相似于 mutation，不同在于：

  • action 提交的是 mutation，而不是间接变更状态。mutation 能够间接变更状态。
  • action 能够蕴含任意异步操作。mutation 只能是同步操作。
  • 提交形式不同，action 是用 this.$store.dispatch('ACTION_NAME',data) 来提交。mutation 是用 this.$store.commit('SET_NUMBER',10) 来提交。
  • 接管参数不同，mutation 第一个参数是 state，而 action 第一个参数是 context。
const store = new Vuex.Store({
  state: {count: 0,},
  mutations: {increment(state) {state.count++},
  },
  actions: {increment(context) {context.commit('increment')
    },
  },
})

留神：vuex 的 mutation 中不能做异步操作

vuex 中所有的状态更新的惟一形式都是提交 mutation，异步操作须要通过 action 来提交 mutation（dispatch）。这样使得咱们能够不便地跟踪每一个状态的变动，从而让咱们可能实现一些工具帮忙咱们更好地应用 vuex

Module

Vuex 容许咱们将 store 宰割成模块（module）。每个模块领有本人的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样形式的宰割：

const moduleA = {state: { ...},
  getters: {...},
  mutations: {...},
  actions: {...},
}

const moduleB = {state: { ...},
  getters: {...},
  mutations: {...},
  actions: {...}
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

实现一个简易版的 vuex

咱们先来看一下 vuex 的应用办法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({state: {},
  mutations: {},
  actions: {},})

通过下面能够看到，vuex 是通过 Vue.use() 注入到 Vue 的。应用Vue.use() 的插件，如果插件是一个对象，必须提供 install 办法。如果插件是一个函数，它会被作为 install 办法。install 办法调用时，会将 Vue 作为参数传入。

实现 Store 类

首先来实现一个 Store 类，代码如下

class Store {constructor(options) {
    this.state = new Vue({data: options.state,})

    this.mutations = options.mutations
    this.actions = options.actions

    options.getters && this.handleGetters(options.getters)
  }

  commit = (type, arg) => {this.mutations[type](this.state, arg)
  }

  dispatch(type, arg) {this.actions[type](
      {
        commit: this.commit,
        state: this.state,
      },
      arg
    )
  }
  // getters 为参数 而 this.getters 是实例化的
  handleGetters(getters) {this.getters = {}
    Object.keys(getters).forEach((key) => {
      Object.defineProperty(this.getters, key, {get: () => {return getters[key](this.state)
        },
      })
    })
  }
}

实现 install 办法

应用Vue.use() 的插件，必须提供 install 办法。并将 Vue 作为参数传入。

let Vue
function install(_Vue) {
  Vue = _Vue

  Vue.mixin({beforeCreate() {if (this.$options.store) {Vue.prototype.$store = this.$options.store}
    },
  })
}

vuex 最终 export 了一个对象这个对象包含了一个 install 办法和一个类 Store, 留神对应咱们的应用办法。

export default {Store, install}

应用简易版 vuex

1、新建 store.js

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

Vue.use(Vuex)

const state = {count: 0,}
const getters = {getCount(state) {return state.count},
}
const mutations = {addCount(state, payload) {state.count += payload},
}
const actions = {asyncAdd(context, payload) {context.commit('addCount', payload)
  },
}

const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
})

export default store

2、main.js 引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

3、页面应用数据状态治理

<template>
  <div>
    <div class="item"> 以后数量是{{count}} <button @click="add"> 减少 </button></div>
    <button @click="asyncAdd"> 异步操作 +10</button>
  </div>
</template>

<script>
  export default {
    computed: {count() {return this.$store.getters.getCount},
    },
    methods: {add() {this.$store.commit('add', 1)
      },
      asyncAdd() {setTimeout(() => {this.$store.dispatch('asyncAdd', 10)
        }, 1000)
      },
    },
  }
</script>

这样就能实现一个简易版的 vuex 了。

具体代码可见 github.com/Michael-lzg…

举荐文章

总结 18 个 webpack 插件，总会有你想要的！
搭建一个 vue-cli4+webpack 挪动端框架（开箱即用）
从零构建到优化一个相似 vue-cli 的脚手架
封装一个 toast 和 dialog 组件并公布到 npm
从零开始构建一个 webpack 我的项目
总结几个 webpack 打包优化的办法
总结 vue 常识体系之高级利用篇
总结 vue 常识体系之实用技巧
总结 vue 常识体系之根底入门篇
总结挪动端 H5 开发罕用技巧（干货满满哦！）

正文完
前端
发表至： 前端
2020-09-01
 0
关于前端:神策-Android-全埋点插件介绍
关于前端:mobxreact中Provider和inject的理解与使用
mockjs踩坑
Javascript开发人员偏爱Deno而不是Node的5大原因