Vuex官方的vuex不推荐在小型应用当中应用,当你的状态比较多但没有特别多的时候,也是需要一个类似的管理机制的,简单管理机制。
//外部一个js
export const store = {
name: 'Kunquer'
}
export const mutations = {
setName (name) {
store.name = name
}
}
这样一个就是简单的store,但是它不能做到响应式的处理。vue2.6发布的一个新的api,可以说是个精简版的vuex,Vue.observable, 在vue3中它变成了reactvie,返回一个响应式的对象,在vue3中返回的是一个响应式代理。所以
export const store = reactive({
name: 'Kunquer'
})
//导入
export default {
name: 'Home',
computed: {
name() {
return store.name
},
methods: {
set() {
mutations.setName(....)
}
},
页面里触发set会实现响应式更新,即使切换路由组件状态依旧可以保持。
领取专属 10元无门槛券
私享最新 技术干货