This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

State

State provides the only common data source, and all shared data is stored in the Store State

Const store = new vuex. store ({// state:{count:0}})Copy the code
  • The first way a component accesses data in State
{{this.$store.state. Global data name}}Copy the code
  • A second way for components to access data in State
import {mapState} from 'vuex'
Copy the code

Use the mapState function you just imported to map global data needed by the current component to computed properties of the current component:

computed:{ ... mapState(['count']) }Copy the code
{{global data name}}Copy the code

Mutation

Used to change data in a Store

With Mutation, changes to all data can be monitored centrally

Each session consists of the largest one representing the next vuex. store ({count:0}, mydn :{add(state){count++}, addN(state, step) { state.count += step } } })Copy the code
  • The first way to trigger mutation
Methods :{handle1(){this. code.store.mit ('add')}, Handle2 (){this. code.store.mit ('addN',3)}}Copy the code

The “3” is step, and the “commit” is a call to some mutation function

  • The second way to trigger mutation
import {mapMutations} from 'vuex'
Copy the code

Based on the imported mapMutations function, map the required mutations function to the methods of the current component:

methods:{ ... mapMutations(['add','addN']), btnHander1() { this.sub() }, btnHander2() { this.subN(3) }, }Copy the code

Action

Action is used to process asynchronous tasks

const store = new Vuex.Store({
    mutations:{
        add(state){
            state.count++
        },
        addN(state,step){
            state.count += step
        }
    },
    actions:{
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000)
        },
        addAsync(context,step){
            setTimeout(()=>{
                context.commit('addN',step)
            },1000)
        }
    }
})
Copy the code
  • The first way to trigger an Action
methods:{
    handle(){
        this.$store.dispatch('addAsync')
    },
  handle(){
        this.$store.dispatch('addAsync',5)
    }
}
Copy the code
  • Second way to trigger an Action
import {mapActions} from 'vuex'
Copy the code
methods:{ ... mapActions(['addAsync','addNAsync']) }Copy the code

Getter

Getters are used to process data in a store to form new data

  • Getters are responsible for processing existing data to produce new data and do not modify the existing data
  • When the original data changes, the Getter changes with it
Const store = new vuex. store({state:{count:0}, getters:{showNum:state=>{return 'currentcount is ['+state.count+']'}}}) const store = new vuex. store({state:{count:0}, getters:{showNum:state=>{return' currentcount is ['+state.count+']'}}})Copy the code
  • The first way to use getters
This $store. Getters. NameCopy the code
  • The second way to use getters
import {mapGetters} from 'vuex'
Copy the code
computed:{ ... mapGetters(['showNum']) }Copy the code

Vuex allows us to define “getters” (you can think of them as computed properties of the store) in the store. Just like evaluating properties, the return value of a getter is cached based on its dependency and is recalculated only if its dependency value changes.

The Getter accepts state as its first argument:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
Copy the code

Access by method

You can also pass parameters to a getter by asking the getter to return a function. It’s useful when you’re querying an array in a store.

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
Copy the code
store.getters.getTodoById(2) // -> { id: 2, text: '... ', done: false }Copy the code

Note that the getter is called every time it is accessed through a method, without caching the result.

Auxiliary function

The mapGetters helper function simply maps the getters in the store to local computed properties:

import { mapGetters } from 'vuex' export default { // ... Computed: {// Mix getters into a computed object using the object expansion operator... mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ] )}}Copy the code

If you want to give a getter property another name, use object form:

. MapGetters ({/ / the ` enclosing doneCount ` mapping for ` enclosing $store. The getters. DoneTodosCount ` doneCount: 'doneTodosCount})Copy the code