vue from introduction to mastery [vuex]

Posted by contex on Mon, 03 Jan 2022 00:00:59 +0100

vue from introduction to mastery [vuex] (VII)

Vuex is a large public warehouse. Vuex can help us manage shared state, with more concepts and frameworks.

Vuex implements a one-way data flow. It has a state to store data globally. When a component wants to change the data in the state, it must do so through changes. Changes also provides a subscriber mode for external plug-ins to call to obtain the update of state data. When all asynchronous operations (commonly used to call the back-end interface to obtain data asynchronously) or batch synchronous operations need to go through actions, but actions cannot directly modify the state, you still need to trigger the methods in changes and then modify the state data through changes. After the data is changed, it is pushed to the component, and the component is re rendered to the view.

Vuex is the state manager of vue, and the stored data is responsive. But it will not be saved. After refreshing, it will return to the initial state. The specific method is to copy and save a copy of the data in vuex to localStorage when the data changes. After refreshing, if there is saved data in localStorage, take it out and replace the state in the store.

Core: State, Getter, Mutation, Action, Module

  1. state: contains the states stored in the store.
  2. getter: similar to the calculation property in Vue, the return value is calculated according to other getters or state s.
  3. mutation: a group of methods, which are the executors of changing the state in the store. They can only be synchronous operations.
  4. action: a set of methods that can contain asynchronous operations.
  5. module: modular management

1, Installation

npm install vuex --save
yarn add vuex

2, Create warehouse

Create a store folder under src and an index js

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


const store = new Vuex.Store({
  state: {
    count: 0,
  getter: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
  mutations: {
    increment (state, payload) {
  actions: {
    addCount(context) {
      // Can include asynchronous operations
      // Context is a context object with the same methods and properties as the store instance

export default store;

Modify main js:

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store'; // Introduce the store object we exported earlier

Vue.config.productionTip = false;

new Vue({
    el: '#app',
    store, // Add the store object to the vue instance
    components: { App },
    template: '<App/>'

Finally, modify app vue:


    export default {
        mounted() {
            // Use this$ store. state. XXX has direct access to the status in the warehouse

At this point, start the project npm run dev to output the value of name we just defined in the store on the console.

3, Use

State is similar to data in vue

Vuex uses state to store the state that needs to be shared in the application. In order to make Vue components change after the state is changed, you need to create calculated properties based on the state.

const state = {

1. Use

{{this.$store.state.count}} (no cache, do not use)

2.computed (with cache)

If the data is not updated, go to the cache to get the latest data

computed: {
     //It has the function of data cache
     count() {
       return this.$store.state.count;

3.mapState auxiliary function

import { mapState } from 'vuex'				 
		c:state => state.count,
			return state.count + state.num 
				return "hello world!"

Note: / / it cannot be modified directly (the page value can change, but the warehouse value remains unchanged). The modification is handled by the warehouse administrator

//Handle ---- "changes" through the warehouse administrator

const store = new Vuex.Store({
  state: {
    count: 1
  mutations: {
    increment (state) {
      // Change status

Store. Needs to be called with the corresponding type Commit method:


Getter is similar to calculating properties in Vue

Similar to the calculation attribute in Vue (it can be considered as the calculation attribute of Store, which processes the data in the Store to form new data), the return value of getter will be cached according to its dependency, and will be recalculated only when its dependency value changes.

The Getter method accepts state as its first parameter:

1. Use
{{this.$store.getters.donearr}} don't use it without cache


computed:{//Role of cache
			return this.$store.getters.donearr

3.mapGetters auxiliary function

import { mapGetters } from 'vuex'
computed: {

Mutations is similar to methods synchronization in vue

Why can't you use direct asynchrony in Mutation

Mutation is used to change the data in the Store.

The data in the Store can only be changed through a mutation. You can't directly operate the data in the Store. You can modify it by commit ting a mutation. Its essence is actually a function

In this way, although the operation is a little cumbersome, it can centrally monitor the changes of all data
The mutation operation must be synchronized

Every time we submit a mutation, we will have a record. Vuex does this to make it easier to record the history and track of each data change, and to facilitate operations such as listening and rollback

1. Use the mutation defined in js to call through commit

		   state.count+=payload;//Change status
// Trigger mutation in component
	//It is handled by the warehouse administrator
  // The first way to trigger changes

2. Pass parameters when triggering changes:

// store.js
mutations: {
    addN(state, step) {  //The first parameter is state, and the following parameter is store The additional parameter passed in by commit, that is, the payload of mutation
        state.count += step
// In component
this.$store.commit('addN', 3) // When the commit function is called, the commit parameter is carried

3.mapMutations auxiliary function

// 1. Import mapMutations function from vuex as needed
import { mapMutations } from 'vuex'
// 2. Map the specified changes function to the methods function of the current component through the mapchanges function just imported
methods: {
    ...mapMutations(['add', 'addN'])

Actions is similar to methods asynchronous in vue

● the Action submits the Mutation instead of directly changing the status. (through Mutation)

● Action can contain any asynchronous operation.

vueX: Note: context --- {commit dispatch, state...}

Note: do not perform asynchronous operations in the mutations function, such as adding a delayer

Only the functions defined in changes have the right to modify the data in state; In actions, you cannot directly modify the data in state. You must use context Commit triggers a mutation.

Context: context object, which is equivalent to this in the arrow function. It has the same properties and methods as the store instance

payload: mounted parameter


1. Use dispatch

// store.js
const store = new{
    //... Omit other codes
    actions: {
        addAsync(context, payload) {
            setTimeout(() => {
            }, 1000)

// Trigger Action in component
methods: {
    handle() {
        this.$store.dispatch('addAsync', 3)

2. mapActions auxiliary function

<button @click="changecountA(5000)">modify countA</button>
import { mapState,mapActions} from 'vuex'
	changecountA: 'addcountA' // Add ` this Changecounta() ` mapped to ` this$ store. dispatch('addcountA')`

Modules module

The store can be divided into modules. Each module has its own state, mutation, action, getter, and even nested sub modules

The function of named true is to tell vuex that all things in the module's state, getters, variations and actions need to be added with a namespace when calling. This namespace is the name of the module when it is improved.

const moduleA = {
	namespaced: "true",
	state: {
		msg: "moduleA...",
		name: "lili",
		age: 28
export default moduleA;

1. Use



msg() {
      return this.$store.state.a.msg;

3. Usage of auxiliary functions: 3

  • 3.1 arrow function
import { mapState } from "vuex";

   msg: (state) => state.a.msg,
   name: (state) =>,
   age: (state) => state.a.age,
  • 3.2 array form
import { mapState } from "vuex";

  • 3.3 through auxiliary functions

You can create helper functions based on a namespace by using createNamespacedHelpers. It returns an object with a new component binding auxiliary function bound to the given namespace value:

import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('a')


4, Function

It can easily realize the data sharing between components

Benefits of using Vuex to uniformly manage state:

● it can centrally manage the shared data in Vuex, which is easy to develop and maintain later

● it can efficiently realize data sharing between components and improve development efficiency

● the data stored in Vuex is responsive and can keep the data synchronized with the page in real time

What kind of data is suitable for storage in Vuex

Generally, only the data shared between components is necessary to be stored in Vuex; The private data of the component can still be stored in the data of the component itself.

  • Multiple views depend on the same state: for example, data sharing among multiple components can get user information on different pages

  • Behaviors from different views need to change the same state: for example, user member information can be changed on different pages

Topics: Vue