Vuex, like vuE-Router, is the core plug-in of VUE. It manages the state of VUE. For values transmitted between components, they can be managed in the state state
1. The state USES
In lecture 2, I modified the SRC /store folder by adding a value to SRC /store/state.js and then explaining how vuex can be used
const state = {
menuType: 1
}
export default state
Copy the codeThis puts menuType into vuex and lets Vuex manage the value. Here’s how to call the value from a component:
<template>
<section>
{{menuType}}
</section>
</template>
<script>
export default {
computed: {
menuType () {
return this.$store.state.menuType
}
},
data () {
return {
}
},
methods: {
},
}
</script>
Copy the codeSo how do you get values that are in modules?
The SRC /store/module/user.js file I created in Lecture 2 is a module. If you add a value to user.js, how do you get it from the component?
const state = {
userName: 'Joe'
}
const getters = {}
const mutations = {}
const actions = {}
export default {
state,
getters,
mutations,
actions
}
Copy the codeCall this value in the component
<template> <section> {{menuType}} {{userName}} </section> </template> <script> export default { computed: { menuType () { return this.$store.state.menuType }, UserName () {return this. $store. State. The user. The userName / / call in the module value}}, the data () {return {}}, the methods: {},} < / script >Copy the codeIn addition to the method of obtaining a value mentioned above, vuex provides an auxiliary function mapSate to obtain a value:
<template> <section> {{menuType}} {{userName}} </section> </template> <script> import {mapState} from 'vuex' export default { computed: { ... mapState({ menuType: state => state.menuType, userName: state => state.user.userName }) }, data () { return { } }, methods: { }, } </script>Copy the codeYou can also use shorthand:
computed: { ... mapState({menuType: state= > state.menuType,
userName: state= > state.user.userName
})
},
/ / abbreviated as
computed: {
...mapState({
userName: state= >state.user.userName }), ... mapState(['menuType',]),},Copy the code2. The getter usage
This is equivalent to a computed property in vue, such as menuType = 1. In my own project, it represents the menuType, 1 represents the ping dial menu, and 2 represents the web dial menu. When you get this value in a component, it doesn’t make sense to repeat it many times
Find the SRC/store/getter. Js:
const getters = {
menuType: state= > {
if (state.menuType == 1) {
return 'ping dial test'
} else {
return 'Web Call Test'}}}export default getters
Copy the codeThen fetch the value from the component:
<template>
<section>
{{menuTypeName}}
</section>
</template>
<script>
export default {
computed: {
menuTypeName () {
return this.$store.getters.menuType
}
},
data () {
return {
}
},
methods: {
},
}
</script>
Copy the codeWe can also use vuex’s auxiliary function mapGetters to get the value:
computed: { ... mapGetters(['menuType'])},Copy the codeHow do I get getters written in a module?
SRC /store/module/user.js add the following code:
const state = {
userName: 'Joe'
}
const getters = {
userName: state= > {
return state.userName + '是管理员'}}const mutations = {}
const actions = {}
export default {
state,
getters,
mutations,
actions
}
Copy the codeUse vuex auxiliary function mapGetters to get getters written in the module:
<template> <section> {{userName}} </section> </template> <script> import {mapState, mapGetters} from 'vuex' export default { computed: { // menuTypeName () { // return this.$store.getters.menuType // }, ... mapGetters([ 'userName' ]) }, data () { return { } }, methods: { }, } </script>Copy the code3. The mutation usage
The first two sections mainly describe how to obtain the value of vuex. If you want to change the value of VUex, you need to commit a mutation to change the value
Find SRC /store/ roads.js and add the following code:
const mutations = {
SET_MENU_TYPE (state, params) {
state.menuType = params
}
}
export default mutations
Copy the codeThen call the mutation in the component:
<template> <section> <p>{{menuType}}</p> < button@click ="handleChangeMenuType('2')"> </template> <script> import {mapState} from 'vuex' export default { computed: { ... mapState([ 'menuType', ]), }, data () { return { } }, methods: { handleChangeMenuType (params) { this.$store.commit('SET_MENU_TYPE', params) } }, } </script>Copy the codeVuex also provides an auxiliary function, mapMutations, to quickly set the value:
<template> <section> <p>{{menuType}}</p> < button@click ="handleChangeMenuType('2')"> </template> <script> import {mapState, mapMutations} from 'vuex' export default { computed: { ... mapState([ 'menuType', ]), }, data () { return { } }, methods: { ... mapMutations([ 'SET_MENU_TYPE' ]), handleChangeMenuType () { this.SET_MENU_TYPE('2') } }, } </script>Copy the codeThe same question remains: how to submit mutation values in the module? Let me give you an example:
Add the following to SRC /store/module/user.js:
const state = {
userName: 'Joe'
}
const getters = {
userName: state= > {
return state.userName + '是管理员'}}const mutations = {
SET_USER_NAME (state, params) {
state.userName = params
}
}
const actions = {}
export default {
state,
getters,
mutations,
actions
}
Copy the codeThen call the mutation written in the module from the component:
<template> <section> {{taskId}} <ul> <li> Did you take your medicine today? </li> </ul> <p>{{userName}}</p> <button @click="handleChangeMenuType"> </button> </section> </template> <script> import {mapState, mapGetters, mapMutations} from 'vuex' export default { computed: { ... mapGetters([ 'userName' ]) }, data () { return { } }, methods: { ... MapMutations (['SET_USER_NAME']), handleChangeMenuType () {this.set_user_name ()}},} </script>Copy the code4. Use the action
Mutation is used to change the vuEX value. This is a synchronous operation. If a value needs to be changed asynchronously, an action is called, which handles asynchronous requests and then changes the vuex value
For example, if the navigation menu in the project needs to be returned dynamically at the back end, and operations such as requesting data are definitely asynchronous operations, I will simulate a request here to modify the value of menuList
const state = {
menuType: 1.menuList: []}export default state
Copy the codeSRC /store/mutations. Js
const mutations = {
SET_MENU_TYPE (state, params) {
state.menuType = params
},
SET_MENU_LIST (state, params) {
state.menuList = params
}
}
export default mutations
Copy the codeNext, create a SRC/API /app.js file and simulate an asynchronous request interface in it:
export const getMenuList = () = > {
return new Promise((resolve, reject) = > {
const err = null
setTimeout(() = > {
if(! err) { resolve({code: 200.data: {
menuList: [{name: 'Create task'},
{name: 'Task list'}]}})}else {
reject(err)
}
})
})
}
Copy the codeGo to SRC /store/actions.js and add the following code:
import {getMenuList} from '@/api/app'
const actions = {
updateMenuList ({commit}) {
getMenuList().then(res= > {
const {code, data: {menuList}} = res
commit('SET_MENU_LIST', menuList)
}).catch(err= > {
console.log(err)
})
}
}
export default actions
Copy the codeTo call an asynchronous function and receive the return value, we can use es7 async/await functions as follows:
import {getMenuList} from '@/api/app'
const actions = {
async updateMenuList({commit}) {
try {
const {code, data: {menuList}} = await getMenuList()
commit('SET_MENU_LIST', menuList)
} catch (err) {
console.log(err)
}
}
}
export default actions
Copy the codeThen call this action in the component:
<template> <section> < button@click ="handleChangeMenuList"> </button> <ul> <li v-for="(item, index) in menuList" :key="index">{{item.name}}</li> </ul> </section> </template> <script> import {mapState, mapGetters, mapMutations} from 'vuex' export default { computed: { ... mapState([ 'menuList', ]), }, data () { return { } }, methods: { handleChangeMenuList () { this.$store.dispatch('updateMenuList') } }, } </script>Copy the codeVuex also provides an auxiliary function, mapActions, to call actions:
<template> <section> < button@click ="handleChangeMenuList"> </button> <ul> <li v-for="(item, index) in menuList" :key="index">{{item.name}}</li> </ul> </section> </template> <script> import {mapState, mapGetters, mapMutations, mapActions} from 'vuex' export default { computed: { ... mapState([ 'menuList', ]), }, data () { return { } }, methods: { ... mapActions([ 'updateMenuList' ]), handleChangeMenuList () { this.updateMenuList() } }, } </script>Copy the codeAgain, how to call an action written in a module?
Find SRC/API /app.js and add an asynchronous interface:
export const getUserName = () = > {
return new Promise((resolve, reject) = > {
const err = null
setTimeout(() = > {
if(! err) { resolve({code: 200.data: {
name: 'bill'}})}else {
reject(err)
}
})
})
}
Copy the codeSRC /store/module/user.js add a method to actions:
import {getUserName} from '@/api/app'
const state = {
userName: 'Joe'
}
const getters = {
userName: state= > {
return state.userName + '是管理员'}}const mutations = {
SET_USER_NAME (state, params) {
state.userName = params
}
}
const actions = {
async getUserName ({commit}) {
try {
const {code, data: {name}} = await getUserName()
commit('SET_USER_NAME', name)
} catch (error) {
console.log(err)
}
}
}
export default {
state,
getters,
mutations,
actions
}
Copy the codeFinally, call the component:
<template> <section> < button@click ="handleChangeMenuList"> </button> <ul> <li v-for="(item, {{item.name}}</li> </ul> <button @click="handleChangeUserName"> </button> <p>{{userName}}</p> </section> </template> <script> import {mapState, mapGetters, mapMutations, mapActions} from 'vuex' export default { computed: { ... mapState([ 'menuList', ]), ... mapGetters([ 'userName' ]) }, data () { return { } }, methods: { ... mapMutations([ 'SET_USER_NAME' ]), ... mapActions([ 'updateMenuList', 'getUserName' ]), handleChangeMenuList () { this.updateMenuList() }, handleChangeUserName () { this.getUserName() } }, } </script>Copy the codeThe above is the basic usage of VUex. Through this article, I believe that there is no problem in using VUex in the project. As for the more advanced usage of VUex, I can learn it in the next article