Vuex, you can think of it as a repository for global variables. Here you can store variables and attributes that are common to various modules.

What kind of data is suitable to store in Vuex

In general, only data shared between components is necessarily stored in Vuex; The private data of the component is still stored in the data of the component itself.

Key core concepts in Vuex

Transfer parameters when triggering mutations:

// store.js mutations: AddN (state, step) {// the first parameter is state, and the following parameter is the additional parameter passed in by store.mit, which is the payload state of the mutation.

This. code. store.mit (‘addN’, 3); // Call commit, triggering mutations with parameters

The second way to trigger mutations is:

  1. Import mapMutations function import {mapMutations} from ‘vuex’ on demand

  2. Mutations function is mapped to the methods function of the current component through the newly imported mapMutations function

methods: { … mapMutations([‘add’, ‘addN’]) }

4. Getter

Getters are used to process data in a Store to form new data. A Getter does not modify the raw data in the Store, but acts as a wrapper.

Getters can generate new data by processing existing data in the Store. Similar to computed properties of Vue, computed values of getters are cached according to their dependencies, and recalculated only when their dependencies change. That is, when the data in the Store changes, the data in the Getter changes as well

Vuex persistence plugin – Solve the problem of missing refresh data

Vuex can perform global state management, but after refreshing, data will disappear, which we do not want to see. To solve this problem, we can use local storage to persist data, or we can use vuex-PersistedState.

1. Manually leverage HTML5’s local storage

methods

  • Vuex state can be localStorage, sessionStorage, or other storage modes
  • Mutations, the definition of the method for vuex state operation and the corresponding operation for storage.

The state then exists with the storage and synchronizes with vuEX

The problem

  • And the intuitive thing is, it’s a little bit cumbersome to write manually.

2. Use vuex-PersistedState

In fact, the principle of plug-in is also combined with the storage method, but unified configuration does not need to manually write storage method every time

Method of use

  • The installation
npm install vuex-persistedstate  --save
Copy the code

  • Import and Configuration

    In index.js under store

  • The default storage is localStorage

To store to sessionStorage, configure as follows

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})
Copy the code

How does VUE listen for attributes in VUex

Watch implements Vuex state monitoring (using computed)

Vuex, via the Store option, provides a mechanism to "inject" state from the root component into each child component (by calling vue.use (Vuex)) : By registering the Store option in the root instance, the store instance is injected into all the children of the root component, which can be accessed through this.$store

Computed: {f1() {return this.$store.state. XXXX}}, watch: {f1(curVal, oldVal) {//Copy the code

In computed computation, you write a function that always returns a result. You can use f1 to listen for $store.state. XXXX, or you can declare a variable in this component and then use watch to listen for curVal in watch.

When there are too many variables to fetch from VUEX, mapState can be used instead

When a component needs to fetch multiple states, it can be repetitive and redundant to declare all those states as computed properties. To solve this problem, we can use the mapState helper function to help us generate calculated properties that will save you from pressing the key:

// In the separately built version, the auxiliary function is vuex.mapstate

import { mapState } from 'vuex' export default { // ... Computed: mapState({// Arrow function makes code more concise count: State => state.count, // Pass string argument 'count' equal to 'state => state.count' countAlias: CountPlusLocalState (state) {return state.count + this.localcount}})}Copy the code

We can also pass mapState an array of strings when the name of the computed property of the map is the same as the name of the child node of State.

Computed: mapState([// map this.count to store.state.count 'count'])Copy the code

The mapState function returns an object. How do we mix it with local computed properties? Typically, we need to use a utility function to merge multiple objects into one so that we can pass the final object to the computed property. But with the object expansion operator (now in the STAGe-4 phase of the ECMAScript proposal), we can greatly simplify writing:

computed: { localComputed () { /* ... */}, // Use the object expansion operator to blend this object into an external object... mapState({ // ... })}Copy the code