Vuex 状态管理模式(一)

目录

Vuex 是什么

Vuex 安装

Vuex 使用

Vuex 应用核心 store 仓库

Vuex 优势

Vuex 缺点

---

Vuex 是什么

• Vuex 专为 Vue.js 应用程序开发的响应式状态管理模式
• 采用集中式存储管理应用所有组件状态，以相应规则保证状态以一种可预测的方式发生变化
• Vuex 已集成到 Vue 官方调试工具 devtools 中

Vuex 安装

• npm 安装

npm install vuex -S

•  yarn 安装

yarn add vuex

Vuex 使用

• 模块化打包系统中，必须通过 Vue.use() 来使用 Vuex
• Vue.use(Vuex) 将状态从根组件注入到每一个子组件中

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 将状态从根组件“注入”到每一个子组件中

export default new Vuex.Store({ })

•  main.js/main.ts 中导入 store 仓库

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Vuex 应用核心 store 仓库

• store 是一个容器包含着应用中大部分的状态 state

Vuex 优势

• Vuex 状态存储是响应式的
• Vue 组件从 store 中读取状态，若 store 中状态发生变化，相应组件也会得到高效更新

Vuex 缺点

• 不能直接改变 store 中的状态
• 改变 store 中的状态，唯一途径显式提交 commit mutation；放便跟踪每一个状态变化

store 中的状态是响应式的，在组件中调用 store 中的状态仅需要在计算属性 computed 中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

Vuex 状态管理模式(一)_taoqidejingling的博客-CSDN博客_vuex状态管理模式Vuex响应式状态管理模式；Vuex安装和使用；Vuex核心；Vuex优势和缺点；https://blog.csdn.net/taoqidejingling/article/details/121221646

Vuex state、mapState、...mapState (二)_taoqidejingling的博客-CSDN博客使用 computed 接收 state 返回的数据，有 4 种方式；子组件可以通过 this.$store.state 访问 store 状态中的值；mapState 辅助函数帮助我们生成计算属性，可以传入一个对象、也可以传入一个数组；对象展开运算符 ...mapState 函数返回的是一个对象，使用工具函数将多个对象合并为一个对象，最终把对象传给 computed 属性；https://blog.csdn.net/taoqidejingling/article/details/121298272

vuex getters、mapGetters、...mapGetters（三）_taoqidejingling的博客-CSDN博客getter 接收 state 作为他的第一个参数；访问 getter 中的数据有 2 中方式；https://blog.csdn.net/taoqidejingling/article/details/121311301

vuex mutations、mapMutations、...mapMutations（四）_taoqidejingling的博客-CSDN博客只能通过 commit mutation 来修改 state 中的状态，this.$store.commit('事件名', 传入的额外参数可选)；mutation 类似事件，每个 mutation 都有一个字符串的事件类型 type 和一个回调函 handler；mutation 接收 state 作为它的第一个参数；mutation提交载荷方式可以向 this.$store.commit() 传入额外的参数，多数情况下载荷是一个对象；mutation 对象风格的提交方式，直接使用包含type属性的对https://blog.csdn.net/taoqidejingling/article/details/121325206

vuex action、mapActions、...mapActions（五）_taoqidejingling的博客-CSDN博客action 和 mutation 的区别？Actions 支持同样的载荷方式和对象方式进行分发，​在组件中分发 ActionAction 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。注册一个简单的 action：const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (st.https://blog.csdn.net/taoqidejingling/article/details/121325999