vuex escrita a mano y principios resuelto

Referencia :  repositorio de código vuex ,   documentos oficiales vuex

Acerca de cómo usar vuex, no diga, esto se logra principalmente a través de una propia vuex, para entender los principios y la aplicación de vuex interna

Acerca de los flujos de trabajo vuex, y no repetirlos, un diagrama de flujo del oficial ( lo que es vuex? ) En esta sección dibujar una (la ubicación específica de la base en la parte inferior) muy clara

flujo de trabajo específico:

1. Cada componente en la tienda compartido de datos, y cada componente puede $ store.state   o captadores de datos entrantes para llegar,

2. muation desencadenada por eventos o devoluciones de llamada, realice datos de actualización de sincronización , accionando de este modo la actualización de vista

3. La operación asíncrona de datos mediante la presentación de la acción,

Nota: Si quieres estar al día de forma simultánea ver, debe estar en acción en el cálculo, y luego ir a cambiar los datos presentados a muaction

Por debajo de su propia vuex en getters, estatales, muations, acciones,

Módulo poco complicado, no se dan cuenta, y se interesó en fase de ejecución, es la gran cantidad de procesamiento recursivo de los datos,

Recursividad, una pérdida de rendimiento, la fuente recursivo se utiliza en lugar de reducir

Vue andamios para crear un proyecto, modificar el directorio src

App.vue

<template>
  <div id="app">
    <h2>vuex</h2>
  </div>
</template>
<script>
export default {}
</script>

main.js

import Vue from "vue"
import App from "./App.vue"
import store from "./store.js"
Vue.config.productionTip = false
new Vue({
  store,
  render: h => h(App)
}).$mount("#app")

store.js

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex) 
export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

Mira el estado usando la biblioteca nativa

store.js Modificar

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex) 
export default new Vuex.Store({
  state: {
    name: "我是原生的state数据"
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

Modificar App.vue

<template>
  <div id="app">
    <h2>vuex</h2>
    <p>{{$store.state.name}}</p>
  </div>
</template>
<script>
export default {}
</script>

Rendering espectáculo

Análisis: En primer componente tiene una propiedad de $ tienda, a continuación, los datos se pueden obtener nuevos Vuex.store ({}) del método de pasar un objeto que

 

Código análisis anterior: Utilice el método Vue.use (), documentos oficiales, se explica, se puede ver el uso de uso del método (), debe proporcionar un método para instalar

Este método tiene dos parámetros, un constructor es Vue, otra opción es

 

Bueno, entonces la mano de su vuex lograr estatal, creado en el directorio src y después archivo vuex.js, una sub-pantalla para mostrar que, a continuación, el documento introducido en el archivo propio vuex

Ahora que dicho, cuando Vue.use () debe proporcionar una instalación de método, el primer parámetro es el constructor Vue, de manera que se pueden obtener todos los métodos y propiedades de vue,

const install = _Vue => {
  console.log("install")
}

export default {
  install
}

Entonces método nuevo Vuex.Store () por lo que debe proporcionar una clase de tienda 

de código inferior utiliza Vue.mixin ({}), incorporado por documento de referencia  Vue-uso  , pasando un objeto, un ciclo de vida de gancho vue beforeCreate adicional

referencia mixta Global  uso global mixta   , donde se puede añadir algunos métodos de extensión, algunos registro de la propiedad mundial

let Vue
class Store {}

const install = _Vue => {
  console.log("install")
  Vue = _Vue // 用一个变量接收 _Vue 构造器
    // 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例
  Vue.mixin({
    beforeCreate() {
      console.log(1)
    }
  })
}

export default {
  install,
  Store
}

Se puede observar que ya imprime

 

Dado que los datos se comparte, cada componente necesario para obtener el almacén de datos, cuando estamos utilizando en la asamblea, lo es. $ Almacenar datos se pueden obtener a través de este, es decir, cada componente necesita tener $ propiedades del almacén por lo que podemos obtener todas las propiedades de $ opciones, imprima el siguiente:

let Vue
class Store {}

const install = _Vue => {
  console.log("install")
  Vue = _Vue // 用一个变量接收 _Vue 构造器
  Vue.mixin({
    beforeCreate() {
      console.log(this.$options)
    }
  })
}

export default {
  install,
  Store
}

 

let Vue
class Store {}

const install = _Vue => {
  console.log("install")
  Vue = _Vue // 用一个变量接收 _Vue 构造器
  Vue.mixin({
    beforeCreate() {
      //判断 根 实例 有木有传入store 数据源,
      //如果传入了, 就把它放到实例的 $store上
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store
      } else {
        // 2. 子组件去取父级组件的$store属性
        this.$store = this.$parent && this.$parent.$store
      }
    }
  })
}

export default {
  install,
  Store
}

Entonces mira método nuevo Vuex.Store (), que un objeto que pasa comprende estado, getters, muations, la acción y otros atributos opcionales

clase del almacén se debe aceptar un parámetro, de la siguiente manera:

let Vue
class Store {
  constructor(options = {}) {
    console.log(options)
  }
}

const install = _Vue => {
  console.log("install")
  Vue = _Vue // 用一个变量接收 _Vue 构造器
  Vue.mixin({
    beforeCreate() {
      //判断 根 实例 有木有传入store 数据源,
      //如果传入了, 就把它放到实例的 $store上
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store
      } else {
        // 2. 子组件去取父级组件的$store属性
        this.$store = this.$parent && this.$parent.$store
      }
    }
  })
}

export default {
  install,
  Store
}

Se imprime la siguiente manera, ya se pueden obtener los datos, sigue reescribir la clase tienda  código

class Store {
  constructor(options = {}) {
    this.state = options.state
  }
}

archivo App.vue

<template>
  <div id="app">
    <h2>vuex</h2>
    <p>{{$store.state.name}}</p>
  </div>
</template>

<script>
export default {}
</script>

Actualizar la página, ya se puede obtener los datos, por lo vuex en el estado, se ha alcanzado un principio

vuex escrita a mano en captadores, vistazo a cómo se utilizan captadores nativa

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: "我是原生的state数据",
    mill: "我是getters用的"
  },
  getters: {
    getMill(state) {
      return state.mill
    }
  },
  mutations: {},
  actions: {},
  modules: {}
})

App.vue

<template>
  <div id="app">
    <h2>vuex</h2>
    <p>{{mill}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    mill() {
      return this.$store.getters.getMill
    }
  }
}
</script>

Representa como:

 

A continuación, imprimir el conjunto de esto. $ Store.getters, es posible que se encuentran para ser un blanco

El tiempo entrante de nuevo captadores de una manera por lo que el método necesita un objeto, el objeto se convierte en el retorno de la propiedad y aceptar un parámetro de estado

Bueno, y luego escribir sus propios vuex.js en captadores

class Store {
  constructor(options = {}) {
    this.state = options.state
    //   定义实例上的 getters
    this.getters = {}
    //   遍历所有的对象中的方法名
    Object.keys(options.getters).forEach(key => {
      // 重新构造 this.getters 对象
      Object.defineProperty(this.getters, key, {
        get: () => {
          return options.getters[key](this.state)
        }
      })
    })
  }
}

Actualizar la página 

Aquí la realización básica del estado, captadores de estas dos funciones, pero la pregunta es, que todos vue saber es sensible, por lo que los datos de cambio directo vuex pueden variar

A continuación, utilizando una demo error de sintaxis

 App.vue

<template>
  <div id="app">
    <h2>vuex</h2>
    <p>{{mill}}</p>
    <p>{{$store.state.num}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    mill() {
      console.log(this.$store.getters)
      return this.$store.getters.getMill
    }
  },
  mounted() {
    setInterval(() => {
      this.$store.state.num += 1
    }, 1000)
  }
}
</script>

store.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: "我是原生的state数据",
    mill: "我是getters用的",
    num: 1
  },
  getters: {
    getMill(state) {
      return state.mill
    }
  },
  mutations: {},
  actions: {},
  modules: {}
})

Sin embargo, el uso de nuestras propias conclusiones escritas no cambia, entonces tenemos que resolver este problema,

Sabemos que en el largo vue datos se escriben en los datos, son apoyo de respuesta, por lo que sólo hay que definir vuex en el estado de los datos en el Vue

Vuelva a escribir el código:

class Store {
  constructor(options = {}) {
    this.state = new Vue({
      data() {
        return {
          state: options.state
        }
      }
    })
    //   定义实例上的 getters
    this.getters = {}
    //   遍历所有的对象中的方法名
    Object.keys(options.getters).forEach(key => {
      // 重新构造 this.getters 对象
      Object.defineProperty(this.getters, key, {
        get: () => {
          return options.getters[key](this.state)
        }
      })
    })
  }
}

Pero si por escrito, entonces no es así llamado originalmente, necesidad de llevar un estado para obtener el (los datos de la clase propiedad de acceso usando la incubadora, getter ) para resolver este problema, el documento de referencia es6

Vuelva a escribir el código de abajo:

class Store {
  constructor(options = {}) {
    this.myState = new Vue({
      data() {
        return {
          state: options.state
        }
      }
    })
    //   定义实例上的 getters
    this.getters = {}
    //   遍历所有的对象中的方法名
    Object.keys(options.getters).forEach(key => {
      // 重新构造 this.getters 对象
      Object.defineProperty(this.getters, key, {
        get: () => {
          return options.getters[key](this.state)
        }
      })
    })
  }
  get state() {
    return this.myState.state
  }
}

Aquí, se ha logrado en gran medida, los datos cambian de respuesta, estado, captadores de

---

Acabado logrado solamente $ snippet método El método y el estado de cada componente:

let Vue
class Store {
  constructor(options = {}) {
    //核心代码: 保证数据都是响应式的
    this.myState = new Vue({
      data() {
        return {
          state: options.state
        }
      }
    })
  }
  // 类的属性访问器
  get state() {
    return this.myState.state
  }
}

const install = _Vue => {
  console.log("install")
  Vue = _Vue // 用一个变量接收 _Vue 构造器
  Vue.mixin({
    beforeCreate() {
      //判断 根 实例 有木有传入store 数据源,
      //如果传入了, 就把它放到实例的 $store上
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store
      } else {
        // 2. 子组件去取父级组件的$store属性
        this.$store = this.$parent && this.$parent.$store
      }
    }
  })
}

export default {
  install,
  Store
}

Lograr la consolidación de captadores de estado y segmentos de código $ tienda y forma de cada componente:

let Vue
class Store {
  constructor(options = {}) {
    // 核心代码: 保证数据都是响应式的
    this.myState = new Vue({
      data() {
        return {
          state: options.state
        }
      }
    })
    //   定义实例上的 getters
    this.getters = {}
    //   遍历所有的对象中的方法名
    Object.keys(options.getters).forEach(key => {
      // 重新构造 this.getters 对象
      Object.defineProperty(this.getters, key, {
        get: () => {
          return options.getters[key](this.state)
        }
      })
    })
  }
  get state() {
    return this.myState.state
  }
}

const install = _Vue => {
  console.log("install")
  Vue = _Vue // 用一个变量接收 _Vue 构造器
  Vue.mixin({
    beforeCreate() {
      //判断 根 实例 有木有传入store 数据源,
      //如果传入了, 就把它放到实例的 $store上
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store
      } else {
        // 2. 子组件去取父级组件的$store属性
        this.$store = this.$parent && this.$parent.$store
      }
    }
  })
}

export default {
  install,
  Store
}

Lograr cometer método, los datos modificados, mirada a la nativa

Hay un método commit menos de $ tienda, commit () método proporciona dos argumentos, un nombre de función se define en muation, se pasa un parámetro de seguimiento, en realidad, este es un abonado de modo de liberación, porque puede haber múltiples métodos , pero es liberado por nombre de la propiedad suscrito, así, a continuación, escribir, ya que hay muations, que primero recibimos todos muations, sólo cometen expuesta externa método

  let mutations = {} // 定义一个对象收集所有传入的 mutations 

  Object.keys(options.mutations).forEach(key => {
     mutations[key] = () => {
     
    }
  })

Métodos para lograr cometió, commit ()

//  提供commit 方法
this.commit = (key, payload) => {
    mutations[key](payload)
}

Así que en la parte superior de las mutaciones de la suscripción, es una colección de todos los métodos, necesidad de atravesar toda la clave, por lo retire todo una vez la tecla de ejecución

 //  定义 muations
    let mutations = {}
    Object.keys(options.mutations).forEach(key => {
      mutations[key] = payload => {
        options.mutations[key](this.state, payload)
      }
    })

Terminando por encima de código se comprometen a lograr

let Vue
class Store {
  constructor(options = {}) {
    // 核心代码: 保证数据都是响应式的
    this.myState = new Vue({
      data() {
        return {
          state: options.state
        }
      }
    })
    //   定义实例上的 getters
    this.getters = {}
    //   遍历所有的对象中的方法名
    Object.keys(options.getters).forEach(key => {
      // 重新构造 this.getters 对象
      Object.defineProperty(this.getters, key, {
        get: () => {
          return options.getters[key](this.state)
        }
      })
    })

    //  定义 muations
    let mutations = {}
    Object.keys(options.mutations).forEach(key => {
      mutations[key] = payload => {
        options.mutations[key](this.state, payload)
      }
    })
    //  提供commit 方法
    this.commit = (key, payload) => {
      mutations[key](payload)
    }
  }

  get state() {
    return this.myState.state
  }
}

const install = _Vue => {
  console.log("install")
  Vue = _Vue // 用一个变量接收 _Vue 构造器
  Vue.mixin({
    beforeCreate() {
      //判断 根 实例 有木有传入store 数据源,
      //如果传入了, 就把它放到实例的 $store上
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store
      } else {
        // 2. 子组件去取父级组件的$store属性
        this.$store = this.$parent && this.$parent.$store
      }
    }
  })
}

export default {
  install,
  Store
}

Acabado código imprime los resultados: (a solamente commit reveló la presentación de)

 

método de envío realización, simplemente cometer casi 

 // 收集 actions
    let actions = {}
    Object.keys(options.actions).forEach(key => {
      actions[key] = payload => {
        options.actions[key](this, payload)
      }
    })
    this.dispatch = (key, payload) => {
      actions[key](payload)
    }

código final de acabado

let Vue

class Store {
  constructor(options = {}) {
    // 核心代码: 保证数据都是响应式的
    this.myState = new Vue({
      data() {
        return {
          state: options.state
        }
      }
    })
    //   定义实例上的 getters
    this.getters = {}
    //   遍历所有的对象中的方法名
    Object.keys(options.getters).forEach(key => {
      // 重新构造 this.getters 对象
      Object.defineProperty(this.getters, key, {
        get: () => {
          return options.getters[key](this.state)
        }
      })
    })

    //  定义 muations
    let mutations = {}
    Object.keys(options.mutations).forEach(key => {
      mutations[key] = payload => {
        options.mutations[key](this.state, payload)
      }
    })
    //  提供commit 方法
    this.commit = (key, payload) => {
      mutations[key](payload)
    }
    // 收集 actions
    let actions = {}

    Object.keys(options.actions).forEach(key => {
      actions[key] = payload => {
        options.actions[key](this, payload)
      }
    })
    this.dispatch = (key, payload) => {
      actions[key](payload)
    }
  }

  get state() {
    return this.myState.state
  }
}

const install = _Vue => {
  console.log("install")
  Vue = _Vue // 用一个变量接收 _Vue 构造器
  Vue.mixin({
    beforeCreate() {
      //判断 根 实例 有木有传入store 数据源,
      //如果传入了, 就把它放到实例的 $store上
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store
      } else {
        // 2. 子组件去取父级组件的$store属性
        this.$store = this.$parent && this.$parent.$store
      }
    }
  })
}

export default {
  install,
  Store
}

Los restantes se retiraron código común, lo hacen por su propia cuenta, tales como el forEach

const forEach = (obj, cb) => {
  // 迭代对象的 会将对象的 key 和value 拿到
  Object.keys(obj).forEach(key => {
    cb(key, obj[key])
  })
}

vuex ciclo de estado se abre con la cookie de sesión, el navegador que se cierra el navegador, al final del ciclo de estado, por lo que una vez que actualizar la página, se perderán los datos individuales

Modo de widget se puede utilizar para almacenar todos los datos

1. Escriba su propia

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe(state => {
    localStorage.setItem("vuex-state", JSON.stringify(state))
  })
}

export default new Vuex.Store({
  plugins: [myPlugin],
  state: {
    name: "我是原生的state数据",
    mill: "我是getters用的",
    num: 1
  },
  getters: {
    getMill(state) {
      return state.mill
    }
  },
  mutations: {
    addNum(state, num) {
      return (state.num += num)
    },
    plusNum(state, num) {
      return (state.num -= num)
    }
  },
  actions: {
    jianNum({ commit }, num) {
      setTimeout(() => {
        commit("plusNum", num)
      }, 1000)
    }
  },
  modules: {}
})

2. Enchufe vuex-persistedstate

hilo add vuex-persistedstate

import Vue from "vue"
import Vuex from "vuex"
import persistedState from "vuex-persistedstate"
Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [persistedState()],
  state: {
    name: "我是原生的state数据",
    mill: "我是getters用的",
    num: 1
  },
  getters: {
    getMill(state) {
      return state.mill
    }
  },
  mutations: {
    addNum(state, num) {
      return (state.num += num)
    },
    plusNum(state, num) {
      return (state.num -= num)
    }
  },
  actions: {
    jianNum({ commit }, num) {
      setTimeout(() => {
        commit("plusNum", num)
      }, 1000)
    }
  },
})