Vuex initialization {install, import, create}

1. Install dependency packages

npm install vuex –save

Import the vuex package

import Vuex from ‘vuex’

Vue.use(Vuex)

3. Create a store object

Exit default new vuex. Store({state: {nums:666}, mutations: {cannot handle asynchronous tasks, otherwise it will cause the VUE browser plug-in to not work, such as timer}, actions: {specialized for asynchronous tasks,}, modules: {}})Copy the code

Direct access to the

The first way a component accesses State data

This.$store.state. This.$store.state.

Import function access

MapState is a fixed notation

  • MapState is a function of state data mapping. Data in state can be obtained through mapState
  • MapState ([‘state data 1′,’state data 2’]), passes the desired state data to mapState as a parameter
  • MapState ([‘count’]) {count:f}

code

<h1> add value :{{nums}}</h1> import {mapState} from "vuex"; // Write data below computed: {... mapState(["nums"]), },Copy the code

Basic use of mutation

To modify data, you must use mutation

You cannot modify data directly, which is not conducive to monitoring data changes and later maintenance

code

Use methods: {//add is a click event, add() {this. codestore.com MIT ("addnums"); Mutations: {addnums(state) {state.nums += 1},},Copy the code

You can also carry parameters

code

Use data methods: {add2() {this. codestore.com MIT ("addnums2", 5); Mutations: {addnums2(state,val) {state.nums += val},},Copy the code

The mapping function triggers mutation

The second way to trigger mutation

  • MapMutations here is also a fixed name
  • MapMutations is used to map the mutations method
  • Like mapState, it is a mapping function and is used in the same way
  • However, mutations, since it is a function, will be mapped in methods

** – Final effect equivalent to: **


methods: {
             add(state) {
                 state.count++
             },
             addN(state, step) {
                  state.count += step
             },
         }
Copy the code

code

Import {mapState, mapMutations} from "vuex"; methods: { ... mapMutations(["subnums"]), sub() { this.subnums(); Mutations: {subnums(state) {state.nums -= 1}},Copy the code

With parameters

code

Methods: {... mapMutations(["subnums", "subnums2"]), sub() { this.subnums(); }, sub2() { this.subnums2(5); Mutations: {subnums(state) {state. Nums -= 1}, subnums2(state,val) {state. Nums -= val},Copy the code

Action

Designed to handle asynchronous tasks,

  • Asynchronous operations are defined in actions
    • To manipulate data in actions, you must change it using the COMMIT trigger method
    • Store data cannot be modified directly in actions, but data can only be modified in mutations
    • Asynchronous methods must take one argument, context, which represents the current store instance object
      • Because for the convenience of triggering the mutations method via commit
  • Trigger action
    • Called through the method dispatch in the Store instance
    • Dispatch: Asynchronous tasks are invoked by dispatch

Trigger action code

AddNN () {this.$store.dispatch("addN"); Mutations: {addnums(state) {state.nums += 1},}, content represents the current store instance object note not the data object actions: SetTimeout (() => {// Call the implementation of mutations content.commit('addnums') },1000) } },Copy the code

Action is triggered with parameters

  • To define an asynchronous method, the second parameter is the one to be passed to the addN method
  • To call an asynchronous method, the first argument is the name of the called method and the second argument is passed to the addNAsync method

code

AddNN () {this.$store.dispatch("addN",5); Mutations: {addnums(state,val) {state.nums += val},}, content represents the current store instance object note not data object actions: SetTimeout (() => {// Call the implementation of mutations content.commit('addnums',val) },1000) } },Copy the code

Action Another way

Introducing methods: {... mapActions(["subN3"]), sub3() { this.subN3(); Mutations: {addnums(state) {state.nums += 1},}, { subN3(content) { setTimeout(() => { content.commit('subnums') },1000) }, }Copy the code

Getter performs pre-delivery processing

H1: Stars, stars, stars

< h1 > {{$store. State. Numx}} < / h1 > state: {nums: 666, numx: 'ha, ha, ha'}, getters: {showNum(state) {return state. Numx = 'stars'}Copy the code