Vuex 解决了什么
- 集中管理状态：Vuex 将应用程序的状态存储在一个集中的地方(数据存储在Store)，称为 Store。这使得状态的更改变得可预测和可追踪。
- 组件之间共享状态：组件之间的数据通信可以通过 Store 进行管理。这样，多个组件就可以共享同一份状态，而不需要通过父子组件传递 props 或事件总线等方法。
- 更好的调试：由于状态集中存储在 Store 中，因此可以轻松地跟踪状态的更改历史记录。这使得调试变得更加容易。
- 更好的可维护性：Vuex 通过明确地分离关注点，使代码更加模块化和可维护。Store 用于存储状态，Actions 用于处理异步逻辑和副作用，Mutations 用于更改状态。
Vuex 为 Vue.js 应用程序提供了一种统一的状态管理机制，使得应用程序状态的管理变得更加简单和高效。
Vuex 是什么
Vuex 是一个用于 Vue.js 应用程序的状态管理模式和库。它的目的是解决在大型应用程序中，组件之间共享状态所带来的复杂性和难以维护的问题。
使用
cdn 安装
https://unpkg.com/vuex@4.0.0/dist/vuex.global.js
npm#
npm install vuex@next --save
yarn add vuex@next --save
快速上手
- 创建一个store
src/store/indx.js- 插件安装到app
app.use(store)
核心概念
使用Vuex的模板
import {createStore} from "vuex"
const store = createStore({
state() { //类似data() ,管理所有状态
return {}
},
getters: { //类似计算属性
},
mutations: { //类似methods 改变state
},
actions: { //可执行异步操作
},
modules: { //单一state容易过于庞大,可分多个store
}
})
export default store
state
声明state
使用
Vuex 使用插件use(store),将store实例从根组件注入到所有的子组件, 子组件使用this.$store, 这里使用模板语法,可以省略this
getters
只想获得指定结果,而不修改数据,请使用getters
声明
使用
结果:
xeuv si sihT
mutations
改变state的状态,唯一方法提交mutaions
声明
使用
使用$store.commit(函数名, 参数)
mutation 必须是同步函数
actions
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
声明
使用
使用dispatch 使用 actions 里的函数
module
store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、
注册到modules
每个模块都有自己的状态,因此访问需要加上模块名
模块如何访问根节点:
对于getters:根节点状态会作为第三个参数暴露出来
对于模块内部的 action，局部状态通过
context.state 暴露出来，根节点状态则为 context.rootState：
命名空间
- 访问模块的state ,需要加上模块名
- 模块的 getters actions会注册到全局命名空间(全局发访问),这样背离了module的初衷, 因此我们希望通过模块名访问到 模块的getters ations
- 你可以通过添加
namespaced: true的方式使其成为带命名空间的模块
mpaState
我们使用store 需要加上非常长的前缀,能不能直接想访问data,那样呢.
对象展开
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({ //不会和局部的conputed冲突
// ...
})
}
