First, understand the VUEX access asynchronous and synchronous methods

The difference between this.$store.dispatch() and this.store.com MIT () methodsCopy the code

Generally speaking, they are only different in the way of access. Both methods are that the mutation passed to VUEX changes the state

Contains asynchronous operations, such as submitting data to the background

This.$store.dispatch(); this.$store.dispatch(); this.$store.dispatch();Copy the code

Synchronous operation

Rows, rows, rows, rows, rows, rows, rows, rows, rows, rows, rows, rows.Copy the code

Commit: Synchronous operation

Store this.store.com MIT ('changeValue',name) with the value this.$store.state.changevalueCopy the code

Dispatch: Asynchronous operation

Store this.$store.dispatch(' getLists ',name) value this.$store.getters.getListsCopy the code

Second, understand the basic attributes of store, what are their functions

State: {count: 1, stu: [{id:1,age:18,name:'dx'},{id:2,age:20,name:'yx'},{id:3,age:100,name:'xx'}] }, Mutations: {// The variables in state can only be modified by means of mutations: {// When you need to change state and sync, here's changeCount: Function (state) {state.count++ console.log(' change count')}}, // This is all asynchronous actions: {}, getters: {// when you need to change the state and have a complicated calculation // it's all methods // if you calculate something that doesn't require the component to return a parameter, just return a value, More20age (state){return state.stu.filter(s =>s.age>=20)} more20Age (state){return state.stu.filter(s => S.age >=20)} Moreage (state){return function(age){return state.stu. Filter (s => S.age >=age)}} namespaced:true; })Copy the code