This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

One, foreword

In the previous section, we introduced the vuex install logic, which includes the following points:

  • Create a vuex plug-in directory.
  • Modular design;
  • Implement plug-in install store instance mixed logic;
  • Mixing effect test;

This article continues to introduce the implementation of State in Vuex.

Two, the previous review

As mentioned in the previous article, when 'vue. use(Vuex)' is executed externally, the install method on the Vuex object is called to install the plug-in, and the store container instance injected when 'new Vue' (root component) is globally mixed with 'vue. mixin'. Before the beforeCreate life cycle is created, blend it into all components and add the Store property for all components. This implements global mixing of store container instances;Copy the code

When using Vuex in a page:

// src/App.vue

<template>
  <div id="app">{{this.$store.state.num}<br>Unit price: 10 yuan<br>Order amount: {{this.$store.getters.getPrice}} yuan<br>
    <button @click="$store.commit('changeNum',5)">Synchronous update: Quantity +5</button>
    <button @click="$store.dispatch('changeNum',-5)">Asynchronous update: Number of asynchronous updates -5</button>
  </div>
</template>
Copy the code

The methods state, getters, Commit, and Dispatch all come from store instances

Create State in the Store class

When new vuex. Store is passed a configuration object:

// Instantiate the container: vuex.store
const store = new Vuex.Store({state,mutation,actions});
Copy the code

So, in the constructor of the Store class, we need a configuration object, options, as an input:

// src/vuex/store.js

// Vuex container
export class Store {
  constructor(options) { // options:{state, mutation, actions}
    const state = options.state; // Get the state object in the options option}}Copy the code

In Vuex, the state requirement in State is reactive, that is, data changes can trigger updated views;

The state in the current Store class is dead and does not have responsiveness.

<template>
  <div id="app">{{this.$store.state.num}<br>Unit price: 10 yuan<br>Order amount: {{this.$store.getters.getPrice}} yuan<br>
    <button @click="$store.commit('changeNum',5)">Synchronous update: Quantity +5</button>
    <button @click="$store.dispatch('changeNum',-5)">Asynchronous update: Number of asynchronous updates -5</button>
    <! -- Test State data response -->
    <button @click="$store.state.num = 100">Test State data responsiveness</button>
  </div>
</template>
Copy the code

$store State = $store State = $store State = $store State

The reason why the view does not follow up is as follows: Num is not responsive data, so it will not be collected by dependence and will not be updated after data changes;

Fourth, realize the State State response

To realize the responsiveness of State data, you can put the State data into VUE’s data, with the help of vUE’s responsiveness:

// src/vuex/store.js

export class Store {
  constructor(options) { // options:{state, mutation, actions}
    const state = options.state;  // Get the state object in the options option

    // Response data :new Vue({data})
    this._vm = new Vue({
      data: {
        // In data, attributes starting with $are not mounted to the VM by default
        $$state: state // The $$state object will do attribute hijacking via defineProperty}})}get state() { $$state = _vm._data.$$state = _vm. data
    return this._vm._data.$$state
  }
}
Copy the code
Here's a trick: in Vue, attributes that start with $are internal and are not mounted to the VM by default; $$state = _vm._data.$$state = _vm._data.Copy the code

$$state = this._vm._data.$$state = this._vm._data. Equivalent to the getter in Object.defineProperty({});

// Todo _data can be linked to Vue2. X source code “data agent implementation”

Conclusion: The responsivity of state state in VUEX is realized by Vue. Responsive data is collected by dependency during page rendering. When the state in the store changes, the view is updated.Copy the code

Five, the end

This paper introduces the realization of State in Vuex, mainly involving the following points:

  • Create State in the Store class.
  • Using Vue to realize the State response;

Next, the implementation of getters in Vuex;