Pay attention to the official account number.
1. vueX Introduction & introduction installation
Vuex is designed for Vue JS application development state management mode. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way
2. vueX# installation
npm install vuex --sa vuex --save
3. Use of vuex
3.1} first create the store file under src
3.2 create actions under the store file js,getters.js,index.js, variations js,state.js
3.3 my actual logical page is home JS, developers can use vuex according to their actual business logic page
3.3 index. In the store file JS ， which introduces ， actions js,getters.js, variations js,state.js, the code is as follows:
// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
export default store
3.4 in Mian JS, which introduces the store file and injects it into the VUE example
// mian.js
import Vue from 'vue'
import App from './App'
import router from './router'
// Import store file
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
// Inject into vue instance
store,
components: { App },
template: '<App/>'
})
4. state. Store status values in JS
// state.js
export default{
//Define variables and customize names
name:'millet',
number:10,
}
4.1 at this time, you can take values on the actual business page. My business page is home js; Pass
this.$store.state.name: the value obtained is Xiaomi;
On my business page is home JS
// home.js
mounted() {
console.log("state.name",this.$store.state.name); // millet
},
5. In mutation To modify the value in JS, you can't call a mutation function directly. You need to call the # store with the corresponding type Commit method;
// mutation.js
export default {
// Modify status value
setname: (state, payload) => {
console.log("Original value:",state,"New value:",payload);
state.name = payload.name;
},
setNumber: (state, payload) => {
state.number = payload.number;
}
}
5.1} call mutation JS. Use commit to synchronously modify the value and change Xiaomi to Xiaomi MAX
commit: synchronous operation, written as this$ store. commit ('changes method name ', value)
On my business page is home JS
commit: synchronous operation, written as this$ store. commit ('changes method name ', value)
See step 5.1 for the modified value
// home.js
// Call mutation The setname in JS changes the name value to 'Xiaomi MAX'
this.$store.commit('setname', {
name: 'millet MAX'
});
6. The action submits the mutation instead of directly changing the status; Action can contain any asynchronous operation;
See 6.1 for the modified value
// action.js
export default {
setnameAsync: (context, payload) => {
// Trigger setname in changes to modify the status value; You can set the number of changes after a certain period of time
context.commit('setname', payload);
},
setnumberAsync: (context, payload) => {
// Trigger setNumber in changes to modify the status value; It can be set to change the data after a certain period of time
context.commit('setNumber', payload);
},
}
6.1 Action. The values submitted in JS are asynchronous, and the Action passes through the store The dispatch # method is triggered;
dispatch: contains asynchronous operations, written as this$ store. dispatch ('action method name ', value)
// home.js
// Call action Set numberasync in JS changes the number value to 1000
this.$store.dispatch('setnumberAsync', {
number: 1000
});
How to use mapState,mapMutations auxiliary functions:
7. With the help of the auxiliary function "mapstate and mapchanges" provided by vueX, you can map the attribute names in state and changes to vue instances. Through this, you can directly access the functions in state and changes
7.1 introduce mapstate and mapmutations into the actual development page. My name is home js
// home.js
// 1. Introduce mapstate and mapmutations
import { mapState,mapMutations } from 'vuex'
// 2. Map the state attribute value to VUE instance in computed
computed: {
...mapState(['name','number'])
}
// 3. In methods, map the functions in mutations to VUE instances
8. Complete code:
// home.js
<template>
<div class="hello">
<h4>name:{{name}}</h4>
<h4>mumber:{{number}}</h4>
<button @click="hscht()">modify name Value of</button>
<button @click="hschtAsync()">Asynchronous modification mumber Value of</button>
</div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
/*
mapState,mapMutations After registration, the same name and number cannot exist
*/
// name，
// number，
data:'',
}
},
mounted() {
this.data = this.$store.state;
// Value
console.log("state.name",this.$store.state.name);
},
methods: {
// The difference between commit and dispatch is that commit is a synchronous operation to submit mutatios, and dispatch is an asynchronous operation to distribute actions
hscht() {
// Synchronous change data
// commit: synchronous operation, written as this$ store. commit ('changes method name ', value)
this.setname({
name: 'millet MAX'
});
},
hschtAsync() {
// Change data asynchronously
// dispatch: contains asynchronous operations, such as submitting data to the background. The writing method is this$ store. dispatch ('action method name ', value)
this.$store.dispatch('setnumberAsync', {
number: 1000
});
},
...mapMutations(['setname','setNumber'])
},
// Using mapState function
computed: {
...mapState(['name','number'])
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
be careful:
-
The difference between commit and dispatch is that commit is a synchronous operation to submit mutatios, and dispatch is an asynchronous operation to distribute actions
-
Use mapState,mapMutations ， to map the attribute names in state and mutations to vue instances. The attribute names injected in vue's data cannot be the same as those in ， mapState,mapMutations ，
-
Document address: https://vuex.vuejs.org/zh/