Vuex到底该怎么用?
1、Vuex是什么东西?
### a. 当一个状态需要被多个组件复用时
此时解决的办法要么就是通过组件传值的方法通过props将需要的状态一层一层的向深层传递,而这样一来,整个项目的代码就会非常的冗(rong)余,且编写起来非常的麻烦还不利于维护。
那么Vuex就是用来解决这个问题的。
把各个组件都需要依赖的同一个状态抽取出来,在全局使用单例模式进行管理。
在这种模式下,任何组件都可以直接访问到这个状态,或者当状态发生改变时,所有的组件都获得更新。
这就是 Vuex 背后的基本思想,借鉴了 Flux、Redux。与其他模式不同的是,Vuex 是专门为 Vue 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
2、安装vuex
npm install vuex
3、概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。一个状态自管理应用包含以下几个部分:
● 状态,驱动应用的数据源;
● 视图,以声明方式将状态映射到视图;
● 操作,响应在视图上的用户输入导致的状态变化。
4、名词概念
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、甚至是嵌套子模块——从上至下进行同样方式的分
5、代码演示
/**
* 从vuex 中引入 createStore
*/
import { createStore } from 'vuex'
// 创建一个新的 store 实例
const store = createStore({
/**
* state 是一个方法,存放状态的地方
* @returns
*/
state () {
/**
* return的就是当前的状态
*/
return {
num: 0
}
},
/**
* 同步修改state
*/
mutations: {
/**
* 接收的第一个参数是当前的state
* 第二个参数是传过来的参数
* @param {*} state
*/
add (state, name) {
console.log(name)
state.num++
}
},
actions: {
/**
* 第一个参数是context 也就是当前上下文
* 比如可以直接获取state、使用commit调用等
*
* 第二个参数是页面传过来的参数
* @param {} context
*/
asyncAdd (context, name) {
console.log(name)
/**
* 使用commit 调用 mutations里面的方法改变数据
* 第一个参数是方法名
* 第二个是要传的参数
*/
context.commit('add', name)
}
}
})
export default store
在入口文件处挂载:
import { createApp } from "vue";
import App from './App.vue'
import vuex from './store'
createApp(App)
// 使用 use 把vuex挂载到实例上
.use(vuex)
.mount("#app");
页面中使用:
<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', '李四')
}
}
}
</script>