槑槑
V1
2021/06/29阅读:65主题:极简黑
vuex
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
什么是“状态管理模式”?
-
状态,驱动应用的数据源; -
视图,以声明方式将状态映射到视图; -
操作,响应在视图上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意:

多个组件共享状态
-
多个视图依赖于同一状态。 -
来自不同视图的行为需要变更同一状态。

什么情况下我应该使用 Vuex?
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:
页面逻辑复杂,页面比较多
安装
yarn add vuex@next --save
初始化store
import { createStore } from 'vuex'
const store = createStore({})
export default store
引入store
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';
import store from './store';
// console.log(import.meta.env['VITE_APP_BASE_API'])
createApp(App).use(router).use(store).use(Antd).mount('#app')
- END -作者介绍
槑槑
V1