VUEX
概念
Vuex 是一个专为vue。js 应用程序开发的状态管理模式+库。它采用集中式村粗管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。一个状态自管理应用包含以下几个部分：
* 状态（State）, 驱动应用的数据源
* 视图（View），以声明式将状态映射到视图
* 操作（Actions）,响应在视图上的用户输入导致的状态变化.
目的作用
把各个组件都需要依赖的同一个状态抽取出来，在全局使用单例模式进行管理。
* 在这种模式下，任何组件都可以直接访问到这个状态，或者当状态发生改变时，所有的组件都获得更新。
* 这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux。
与其他模式不同的是，Vuex 是专门为 Vue 设计的状态管理库，
以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新
安装 npm i vuex
名词概念
1. state
- Vuex 使用单一状态树，也就是用一个对象就包含了全部的应用层级状态。
- 至此它便作为一个唯一数据源 (SSOT)而存在。这也意味着，每个应用将仅仅包含一个 store 实例。
- 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照
2. getter
计算属性，可以理解成页面中的计算属性, 用法也一致
3. Mutation
-
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
-
Vuex 中的 mutation 非常类似于事件：
- 每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。
- 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
- 注意：mutation 是同步的
4. Action
- 类似于 mutation，但是它是异步的。不能直接修改 state
5. Module
- 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
- 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分
代码演示:
1. 在 src 下创建 store 目录, 并添加 index.js 文件
// 从vuex 中引入createStore
import { createStore } from "vuex"
// 创建一个新的 store 实例
const store = createStore({
state() {
return {
num: 100,
};
},
// 同步修改 state
mutations: {
// 接收的第一个参数是当前的state
// 第二个参数试穿过来的参数
add(state, name) {
console.log(name)
state.num++
}
},
actions: {
// 第一个参数是context 也就是当前上下文
// 比如可以直接获取state、使用 commit 调用等
// 第二个参数是页面传过来的参数
asyncAdd(context, name) {
console.log(name);
// 使用 commit 调用 mutations 里面的方法改变数据
// 第一个参数是方法名
// 第二个是要传的参数
context.commit("add", name);
},
},
});
export default store;
2. 在入口文件引入, 并通过 use 挂载
import { createApp } from "vue";
import router from "./router";
import vuex from "./store";
createApp(LearnRouter)
// 使用use 方法 把我们路由挂载到vue上
.use(router)
// 使用 use 把vuex挂载到实例上
.use(vuex)
.mount("#app");
3. 在页面中使用
<template>
<div>
{{ $store.state.num }}
<button @click="add">+1</button>
<button @click="asyncAdd">action</button>
</div>
</template>
<script>
export default {
methods: {
add() {
// 使用 this.$store.commit 方法调用 mutations 里面的方法
// 第一个参数是方法名
// 第二个参数是要传的参数
this.$store.commit("add", "张三");
},
asyncAdd() {
// 使用 dispatch 调用 action里面的方法
this.$store.dispatch("asyncAdd", "李四");
},
},
};
