BUS

bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

export default {
  methods: {
    handleClick () {
      this.$bus.$emit('on-click', 'hello')
    }
  }
}

export default {
  data () {
    return {
      message: ''
    }
  },
  mounted () {
    this.$bus.$on('on-click', mes => {
      this.message = mes
    })
  }
}

// Add the following statement to the B Component page to destroy the component when it is beforeDestory.
  beforeDestroy () {
    bus.$off('get', this.myhandle)
  },

vuex

Document address: https://vuex.vuejs.org/zh/

yarn add vuex

import Vuex from 'vuex'

Strictly speaking, the concept of Store is not a direct subset of vuex attributes. The core of each vuex is Store, which can also be called a warehouse, which is a single state management container.

State, getter, mutation, and other properties can be configured in Store, which covers the initialization, acquisition, and update of a data.

Store maintains a responsive state storage mechanism that notifies the Vue component for responsive updates when Store's data changes.

A Store has some agreed-upon properties, so the process of defining a Store is basically as follows:

Introduce Vue and Vuex, and enable Vuex:

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

Vue.use(Vuex);

Define the state of the Store:

const state = {
  count: 0
}

Define the getters for Store: (if necessary)

const getters = {
  getCount(state) {
    return state.count;
  }
}

This is not accessed as this.$store.state.count, but as this.$store.getters.getCount (and, of course, more concise), which allows you to perform a series of operations in a function and return data in addition to changes in access.

Define Store mutations:

const mutations = {
  increment(state){
    state.count ++ ;
  }
}

getters get data, while mutations show changes to the data.Store's state is not allowed to be modified in the form of this.$store.state.count = 2. Submitted changes must be displayed to perform the changes.

The way to submit changes is this.$store.commit(mutationName).

Initialize state, getters, and mutations into new Vuex.Store({}):

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

export default store;

Finally, the store is exported, then introduced in the new Vue({}), mounted under the store property.

import store from './store';

new Vue({
  el: '#app',
  router,
  store,
  render: (c) => {return c(App)}
});

state

Vuex is a single state tree to manage states, while Store is the storage repository for Vuex, and the state attribute of Store is the true representation of data or state in each store.

If you are familiar with React, you don't need to emphasize what a state is. All data initialization definitions should be defined in a state, and getting data can also be fetched from a state, but you can't change the value of a state directly.

For example, how to read the value of a state in a template:

<p>count is: {{this.$store.state.count}}</p>

If you are not using getters, it is also generally recommended that the value of the state be initialized to a property of the component computed, simplifying many of the code for this.$store.state.xxx.

For example, I assign state.count to count in computed:

 computed: {
      count() {
        return this.$store.state.count
      }
    },

This allows me to use count directly in the template:

<p>count is: {{count}}</p>

mapState

Using mapState requires first importing from vuex

 import {mapState} from 'vuex';

Even if computed is initialized each time, a large amount of this.$store.state.xx is written, so vuex exposes a property of mapState for boundary development, especially when the value of state is initialized to computed:

computed: mapState({
    // Arrow functions can make your code more concise
    count: state => state.count,

    // The pass string parameter'count'is equivalent to `state => state.count`
    countAlias: 'count',

    // In order to be able to use `this` to obtain a local state, a general function must be used
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

Getters

getters are just for easier access to data, such as a count state, which is typically done by business components if different components require different counts of results, and store s can do that too.

The definition of a getter is also simple, defining an attribute in which the formal parameter is state

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }

By passing in the state parameter, you can access the status of the current store, perform a series of judgment filtering, and so on.

getters: {
  doneTodos: state => {
      return state.todos.filter(todo => todo.done)
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

getters: {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

mapGetter

computed: mapGetter({
    // Arrow functions can make your code more concise
    count: getters=> getters.getCount,

    // The pass string parameter'count'is equivalent to `getters=> getters.getCount`
    countAlias: 'getCount',

    // In order to be able to use `this` to obtain a local state, a general function must be used
    countPlusLocalState (getters) {
      return getters.getCount+ this.localCount
    }
  })
}