vue3状态管理设置

最新推荐文章于 2025-10-20 03:08:26 发布

原创最新推荐文章于 2025-10-20 03:08:26 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

这篇博客探讨了在Vue.js应用中如何实现状态管理和组件间的通信。通过引入store模块，展示了如何创建一个包含反应式状态和更新方法的全局状态仓库，并在App组件中注入store，使得其他组件能便捷地访问和修改状态。这种方法对于大型Vue项目的组织和维护至关重要。

// store/index.js
import { reactive } from 'vue';
const store = {
    state:reactive({
        message:"helloworld"
    }),
    setMessage(value) {
        this.state.message = value
    }
}
export default store;

// App.vue
import store from './store/index.js
export default{
	name:'App',
	provide:{
		store
 	}
}

// 需要store的页面
export default {
	inject:['store']
}