Vue3.2 + ts 中使用 vuex
一般用法
直接store.state.msg和监听都可以让vuex的值成为响应式
<!--某vue文件-->
<template>
{{store.state.msg}}
{{msg}}
</template>
<script setup lang="ts">
import { isRef, computed } from 'vue'
import {useStore} from 'vuex'
const store = useStore()
const msg = computed(()=>store.state.msg)
setTimeout(()=>{store.commit('setMsg','abc')},3000) //调用mutations
</script>
module模块化的用法
// ./one/index.ts
interface State {
msg:string
}
const one = {
namespaced:true, //让这里的东西独立成模块，不然mutations等都会和根state的合并
state:{
msg:'one hello'
},
mutations: {
setMsg(state:State, str:string) {
state.msg = str
}
}
}
export {one}
// index.ts
import {createStore} from 'vuex'
import {one} from './one/index'
export const store = createStore({
state:{
msg:'storeData'
},
mutations:{
setMsg(state, str:string) {
state.msg = str
}
},
strict:true,//开启严格模式，只有在mutation中才可以更改state
modules:{
one
}
})
<template>
{{store.state.msg}}
{{msg}}
{{store.state.one.msg}}
</template>
<script setup lang="ts">
import {computed } from 'vue'
import {useStore, mapState} from 'vuex'
const store = useStore()
const msg = computed(()=>store.state.msg)
setTimeout(() => {store.commit('setMsg','abc')},3000)
setTimeout(() => {store.commit('one/setMsg','def')},3000)
</script>
往期回顾：
Vue语法糖 setup 知识点合集 - 掘金 (juejin.cn)
Vue3中emits和attrs的区别 - 掘金 (juejin.cn)
Vue3中provide/inject 和expose/import的差别 - 掘金 (juejin.cn)
不要一直用div啦！语义化标签了解下？ - 掘金 (juejin.cn)
WebSocket指南：5分钟带你写一个小型的双端通信 - 掘金 (juejin.cn)
就这样，喜欢可以关注一下，拜拜！🥳
