Loading...
墨滴

槑槑

2021/06/29  阅读:35  主题:极简黑

vuex

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

什么是“状态管理模式”?

  • 状态,驱动应用的数据源;
  • 视图,以声明方式将状态映射到视图;
  • 操作,响应在视图上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意:

img
img

多个组件共享状态

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。
vuex
vuex

什么情况下我应该使用 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 -

槑槑

2021/06/29  阅读:35  主题:极简黑

作者介绍

槑槑