前言
Vue3在2月份已经变成默认版本了,接下来的vue3将会成为主流的框架。
我们来看看vue3中的奇妙世界吧
vuex
Vuex 是一个专为 Vue.js 的状态管理工具,可以解决组件之间数据共享的问题。
注意:我们在项目中如果使用到vuex,最好通过dispatch触发actions的事件 ---> 在actions里通过commit触发mutation ---> 改变state的状态
在vue3.x中如何使用vuex
vue2.x和vue3.x最大的区别就是 vue3.x中使用的是Composition API
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore()
}
}
在store/index.js文件:
import { createStore } from "vuex";
export default createStore({
state() {
return {
num:1
}
},
mutations:{
addNum(state) {
state.num++
}
},
actions:{
// change(context)
// context是一个关联vuex上下文的实例
change({commit}) {
commit('addNum')
}
},
getters:{
// gAge(state, getters)
// state 全部的数据状态
// getters 全部的计算属性
gAge() {
return 18
}
},
modules:{}
})
访问 state
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
const num = computed(()=>store.state.num)
return {
num
}
}
};
访问 getters
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
const age = computed(()=>store.getters.gAge)
return {
age
}
}
};
访问 mutations
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
const add = ()=>{
store.commit('addNum')
}
return {
add
}
}
};
访问 actions
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
const add = ()=>{
store.dispatch('change')
}
return {
add
}
}
};
使用辅助函数
mapState
默认的情况下,vuex并没有提供非常方便使用mapState的方式,这里我们进行一个函数的封装:
import { useStore,mapState } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
const storeStateFns = mapState(["num","age","name"])
// 相当于
// {
// num(){ return this.$store.state.num},
// age(){ return this.$store.state.age},
// name(){ return this.$store.state.name},
// }
const storeState = {}
Object.keys(storeStateFns).forEach(key=>{
// 使用bind修改this的指向,this.$store相当于
// store(我们实例化出来的const store = useStore())
// 我们也不能使用call和apply修改this,因为我们要确保fn是一个函数
const fn = storeStateFns[key].bind({$store:store})
storeState[key] = computed(fn)
})
return {
...storeState
}
}
};
mapGetters
与mapState使用方法一样
mapMutations
<template>
<div class=''>
{{num}}
<button @click="add">点击吧</button>
</div>
</template>
<script>
import { useStore,mapMutations } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
const num = computed(()=>store.state.num)
const storeMutations = mapMutations({"add":"addNum"})
return {
...storeMutations,
num
}
}
};
</script>
对于模块划分可以看我的另一篇博客 <( ̄︶ ̄)↗[GO!]