What is Vuex?

VueX is a state management tool suitable for use in Vue project development. Imagine a project that frequently uses component arguments to synchronize values in data. Managing and maintaining those values can be tricky once the project becomes large. To this end, Vue provides a unified management tool — VueX — for these values that are frequently used by multiple components. In a Vue project with VueX, we just need to define these values in the VueX to be used in the components of the entire Vue project.

The installation

Vue Cli scaffolding is used by default

npm i vuex
Copy the code

Use Vuex in your project

│ App. Vue │ main. Js │ ├ ─ assets │ vue. PNG │ ├ ─ components │ HelloWorld. Vue │ ├ ─ the router │ index. The js │ └ ─ store index, jsCopy the code

use

// store/index.jjs
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
   // Store status
  state: {},
  // Member operations
  mutations: {},
  // Asynchronous operation
  actions: {},
  // Process the state member to the outside world
  getters: {},// Modular state management
  modules: {}})Copy the code

Vuex workflow

First of all, we should know that the data in Vuex are all responsive. The component can directly modify the data in state by submitting the method in Mutations. Once the data in state is modified by Render, the rendering will be rewritten, and the component page will be updated

If the operation has an asynchronous operation, it needs to be dispatched to Actons for processing, and then submitted to Mutations

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false
// Global event bus
Vue.$bus = Vue.prototype.$bus = eventBus

new Vue({
  store,
  render: h= > h(App)
}).$mount('#app')

Copy the code

state

state/index.js
export default {
    / / data
    msg:"Hello World".language: ["Java"."JavaScript"."Pythone"."Go"."TypeScript"].now:"2021-10-30"
}
Copy the code

actions

Because you operate asynchronously directly in the mutation method, you will cause data invalidation. So Actions are provided specifically for asynchronous operations, and the mutation method is eventually submitted.

Methods in Actions have two default arguments

  • contextContext (equivalent to this in the arrow function) object
  • payloadMount parameters
state/actions.js
// Complete the asynchronous operation in actions, and then submit it to Mutations
export default {
// context context
// Payload Payload information
   CHANGE_MSG(context,payload){
   Asynchrony can be handled in actions
        setTimeout(() = >{
            context.commit(CHANGE_MSG,payload)
        },2000)},EDIT_LANGUAGGE({commit},payload){
        // Perform the conditional judgment at commit
        if(payload){
            commit(CHANGE_MSG,payload)
        }
    }
}
Copy the code

mutions

Mutations methods have default parameters :([state] [,payload])

  • stateIs the currentVueXThe object of thestate
  • payloadIs used by the method to pass arguments when called
state/mutions.js
// mutions is where the state data is actually modified
export default {
    // state Maintains data
    // Payload Payload information
   CHANGE_MSG(state,payload){
       // Some logic for changing state
    },
    EDIT_LANGUAGGE(state,payload){
        // Some logic for changing state}}Copy the code

getters

Members in state can be processed and passed to the outside world

Methods in Getters take two default arguments

  • stateThe state object in the current VueX object
  • gettersThe current getters object used to take other getters under getters
state/getters.js
// It can be interpreted as a calculation property that further processes the data back to the user without affecting the source data
export default {
// Use getters to process data
    GET_INDEXOF_JAVA: state= > {
        return state.language.filter(a= >a.indexOf("Java")! = -1)}Copy the code

modules

When a project is large and has many states, modular management can be adopted. Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, getter, and even nested submodules — split the same way from top to bottom.

// state/Modules.js
export default {
      foo: {// Enable the namespace
          namespaced: true
      },
      bar:{}
}
Copy the code

A binding function with a namespace

MapState, mapGetters, mapActions, and mapMutations

<template>
  <div>Hello World</div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Test'.computed: {
    // when the namespace is enabled. mapState('namespaced'['foo.xxx']),
    // Namespace usage is not enabled. mapState('namespaced/foo.xxx')
    / /... The other three map functions are similar
    // Understand the difference between {} and []
    // more...
  },
  methods: {},
  data () {}
}
</script>

<style></style>

Copy the code

Recommended article: Official Vuex state Management document