VueX finishing

Today we will explain the VueX as one of the vUE family barrels.

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool devTools extension, which provides advanced debugging features such as zero-configuration time-travel debugging, state snapshot, import, and more. ——- is from vuex’s official website

To put it bluntly, let multiple components share a single set of data, avoiding the cumbersome BUS pattern.

Official website: vuex official website

componentsThe: event generates a trigger that calls Dispatch to execute actionsactions: Tell mutations when to operate statemutations: used to manipulate state datastate: “single state tree” —- Public data store, after being changed, call render to re-render data on components

Store code

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    global_index: "1".ifanimate: true
  },
  mutations: {
    changeInd(state,num){
      state.global_index = num
    },
    doanimate(){
      this.state.ifanimate = false
      console.log(this.state.ifanimate); }},actions: {},modules: {}})Copy the code

Use this.$store.state to reference data directly in.vue for special cases with computed()

	computed:{
		ifanimated(){
			return this.$store.state.ifanimated
		}
	}
Copy the code

Use methods to change data in SOTRE

The method in mutations is called using COMMIT, with the first parameter being the method name and the second parameter being the parameter that needs to be passedCopy the code

	 methods: {
      handleSelect(keyPath) {
        this.$store.commit('changeInd',keyPath)
      }
    }
Copy the code

In order to make the code more maintainable and visual, we split the directory; Let’s look at the split directory structure first:

Specific code ::

// state.js
// Similar to data in the component, provide data to mutation and getters
export default {
    count:0.name:'Juno'.userInfo: {school:"Tsinghua university"
    },
    age:18
}

// mutations.js
// mutations is similar to methods in a component, which changes the value in state
export default {
    changeNum(state,num){ state.count = num; }}// getters.js
// Getters is analogous to computed in components, which first recalculates data in State according to rules to reduce rework in each component
// getters does not change the value of state; it returns a new object
export default {
	// fullName successfully returns the combined value of the two variables in state, reducing the duplication of effort in multiple components
    fullName(state){
        return `${state.name} - ${state.age}`}}// store.js

import Vuex from 'vuex'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
export default (() = >new Vuex.Store({
    state:defaultState,
    mutations,
    getters
}))
Copy the code

Let’s see the specific use:

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
      <! </router-view> -- <router-view name="conA"> Just a trick, but not implemented
    </transition>
    <div class="storeClass">{{counter}} </div>
    <div class="storeClass"> {{fullName}} </div>

    <div class="storeClass"> {{userInfo}} </div>
    <button @click="changeStoreGetter"> changeStoreGetter </button>
    <router-link to="/a">helloWorld</router-link>

    <router-link to="/b">element</router-link>
  </div>
</template>

<script>
// To reduce the verbosity of code:
// mapState is this.$store.state
// mapGetters is this.$store.getters
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'App',
  data () {
    return{}},methods: {
    changeStoreGetter () {
      this.$store.state.age = 222; }},computed: {
    //  
    // It is written as... MapState (['mapState']), also ok
    // But if the output is a string for an object, it is not good to use dot operators such as userinfo.username; ---- update: after testing, it turns out that it is also available at............ 0.0. mapState({counter: (state) = > state.count,
      userInfo: 'userInfo'
    }),
    ...mapGetters(['fullName'])
    // count () {
    // return this.$store.state.count
    // },
    // fullName () {
    // return this.$store.getters.fullName
    // },
  },
  mounted () {
    console.log('storeCount'.this.$store)
    let numIs = 2;
    setInterval(() = > {
      this.$store.commit('changeNum', numIs++)
    }, 1000)}}</script>

<style>
.storeClass {
  color: red;
}
.fade-enter-active..fade-leave-active {
  transition: opacity 0.2 s;
}
.fade-enter..fade-leave-to {
  opacity: 0;
}
</style>

Copy the code