Vuex的基本操作使用
一、创建vuex
首先最简单的方法就是在创建vue3项目时直接勾选vuex,会自动配置好,
二、state使用
在store中的index.js内。
state是专门用来存放的全局数据,相当于组件中的data。
import { createStore } from 'vuex'
export default createStore({
state: {
number: 333
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
模板中使用
<div>
<h2 style="color: white">数字:{{ $store.state.number }}</h2>
</div>
页面展示效果
二、getters使用
将组件中统一使用的computed都放到getters里面来操作
import { createStore } from 'vuex'
export default createStore({
state: {
number: 333
},
getters: {
getNum(state) {
return state.number
}
},
mutations: {
},
actions: {
},
modules: {
}
})
返回state的值
<div>
<h2 style="color: white">数字:{{ $store.getters.getNum }}</h2>
</div>
实现效果
三、mutations使用
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
但是不能使用异步方法。
import { createStore } from 'vuex'
export default createStore({
state: {
number: 333
},
getters: {
getNum(state) {
return state.number
}
},
mutations: {
increase(state, payload) {
state.number += payload ? payload : 1;
}
},
actions: {
},
modules: {
}
})
模板中使用
<div>
<h2 style="color: white">数字:{{ $store.getters.getNum }}</h2>
<button @click="$store.commit('increase', 1)">点击加1</button>
</div>
实现效果
四、actions
actions是store中专门用来处理异步的,但是要修改状态的话,还是mutations
import { createStore } from 'vuex'
export default createStore({
state: {
number: 333
},
getters: {
getNum(state) {
return state.number
}
},
mutations: {
increase(state, payload) {
state.number += payload ? payload : 1;
},
Sub(state) {
state.number--;
}
},
actions: {
decreaseAsync(context) {
context.commit('Sub')
}
},
modules: {
}
})
模板中
<div>
<h2 style="color: white">数字:{{ $store.getters.getNum }}</h2>
<button @click="$store.commit('increase', 1)">点击加1</button>
<button @click="$store.dispatch('decreaseAsync')">点击延迟减1</button>
</div>
页面展示
五、modules
我们的store可以认为是一个主模块,它下边可以分解为很多子模块,子模块都可以单独领出来写,写完再导入到主模块中。
export const MUTATIONS_TYPE = {
INCREASE: 'increase',
DECREASE: 'decrease'
}
export default {
// 让num累加
// payload是一个形参,如果组件在commit时,有传这个参数过来,就存在,如果没有传过来,就是undefined
[MUTATIONS_TYPE.INCREASE](state, payload){
state.num += payload ? payload : 1;
},
// 让num累减
[MUTATIONS_TYPE.DECREASE](state){
state.num--;
}
}
模板中
<template>
<div class="about">
<h2>About页面的数字:{{getNum}}</h2>
<button @click="increase()">About的按钮,点击加1</button>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { MUTATIONS_TYPE } from '@/store/mutaions_type.js'
export default {
computed: {
...mapGetters(['getNum'])
},
methods: {
// 方法一:
...mapMutations([MUTATIONS_TYPE.INCREASE])
// 方法二:
/* increase(){
this.$store.commit(MUTATIONS_TYPE.INCREASE)
} */
}
}
如果大家有更好的建议,请大家评论区探讨