一、Vuex是什么？
二、什么时候使用Vuex
三、Vuex的核心概念和API
- 1、state
- 2、 mutations
- 3、 actions
- 4、 getters
- 5、 modules
四、Vuex的运作流程
五、应用举例
六、vuex中各种辅助函数的用法，可以使我们更加方便的运用vuex
- 1、…mapState
- 2、…mapGetters
- 3、…mapMutations
- 4、…mapActions

一、Vuex是什么？

Vuex在Vue项目开发时使用的状态管理工具。简单来说，就是对Vue的应用中多个组件的共享状态进行集中式的管理（读/写）

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。
而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

二、什么时候使用Vuex

适用场景：构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态，即多个组件共享状态：

多个视图依赖于同一状态：此时传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
来自不同视图的行为需要变更同一状态：此时采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码
在这些情况下就适合用Vuex进行全局单例模式管理

三、Vuex的核心概念和API

流程：View -> Actions -> Mutations -> State -> View

1、state

(1)vuex 管理的状态对象:vuex的基本数据，用来存储变量
(2)它应该是唯一的

 state: {userId: '',name: '',token: '',}

在vue中使用 this.$store.state.userId

2、 mutations

mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

  mutations: {SET_USER: (state, userId) => {state.userId = userId},SET_TOKEN: (state, token) => {// console.log(token)state.token = token}},

commit：同步操作，写法： this.$store.commit(‘mutations方法名’,值)
例如：

   this.$store.commit('SET_USER','123456')

3、 actions

actions：和mutation的功能大致相同，不同之处在于 ==>

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

3.通过执行: commit()来触发 mutation 的调用, 间接更新 state
4.谁来触发: 组件中通过this.$store.dispatch(‘action 名称’, data1) (dispatch：异步操作)
5.可以包含异步代码(axios)

  actions: { // {} 是es6中解构，把对象解构成属性login({ commit }, value) {commit('SET_USER', value)// commit('SET_TOKEN', value2)},}

4、 getters

getters：从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法
谁来读取: 组件中: this.$store.getters.xxx

  getter: {userIdDouble: function(state){return state.userId * 2}

5、 modules

modules：模块化vuex，可以让每一个模块拥有自己的state、mutations、actions、getters,使得结构非常清晰，方便管理。
简单来说就是可以把以上的 state、mutations、actions、getters 整合成一个user.js,然后放到store.js里面

四、Vuex的运作流程

流程详解

在组件（页面）中，通过dispatch()或mapActions()这个函数分发给actions的函数去处理。
actions的函数可以与后台交互，也可以通过 commit() 提交给mutations去处理。
mutations 可以直接与devtool（如本地存储工具 → 在实例代码中的utils里的storageUtils.js）交互与直接更新state（数据状态）。
如果有计算属性（get函数写在getters里面），则状态通过getters的$store.getters()或...mapGetters()来更新组件；反之就通过$store.state()或者...mapState()的方式来更新组件。

五、应用举例

1、安装

npm install vuex

2、创建store：src/store/index.js

index.js代码段：

import {createStore} from "vuex";export default createStore({//state是全局存储数据的对象,vuex中的数据源,我们需要保存的数据就保存在这里，可以在组件通过 this.$store.state来获取我们定义的数据；state: {count:0,age:0},/*计算属性(可选的)：用于获取state属性的值(1)若定义了getters，获取state属性值的方法是$store.getters()或mapGetters()(2)若没有定义getters，获取state属性值的方法是：$store.state()或mapState()*/getters: {getterAge(state){  //state是原来的状态return state.age=25  //return返回的是新的状态}},/*mutations:用于修改state状态值。定义的函数必须是同步的*/mutations: {addCount(state,obj){  //state是原来的state，obj是调用该方法时传入的对象return state.count += obj.num},subCount(state,obj){return state.count -= obj.num}},/*actions:通过动作的提交，来调用mutations中的方法，修改state属性*/actions: {//异步加法函数addCountAsyn(context){   //context：表示上下文环境，就是派发动作的对象(组件)setTimeout(()=>{context.commit('addCount',{num:1})},3000)},//异步减法函数subCountAsyn(context){setTimeout(()=>{context.commit('subCount',{num:1})},3000)}}})

在main.js文件中使用store

创建Home.vue组件

<template><div><h2>通过Getter获取age：{{getterAge}}</h2><p>Count:{{ count }}</p><button @click="handlerAdd">同步加1</button>&nbsp;&nbsp;&nbsp;&nbsp;<button @click="handlerSub">同步减1</button>&nbsp;&nbsp;&nbsp;&nbsp;<button @click="handlerAddAsyn">异步加1(3s后执行)</button>&nbsp;&nbsp;&nbsp;&nbsp;<button @click="handlerSubAsyn">异步减1(3s后执行)</button></div>
</template><script>
export default {name: "Home",computed:{count(){   //使用非getters方法获取state的count属性值return this.$store.state.count},getterAge(){  //使用getters方法获取state的agereturn this.$store.getters.getterAge}},methods: {handlerAdd(){  //同步加1this.$store.commit('addCount',{num:1})  //通过commit提交动作：addCount，给mutations},handlerSub(){this.$store.commit('subCount',{num:1})},handlerAddAsyn(){  //异步加1this.$store.dispatch('addCountAsyn')  //通过dispatch方法将动作派发给action，再由action提交给mutations},handlerSubAsyn(){  //异步减1this.$store.dispatch('subCountAsyn')}}
}
</script><style scoped></style>

App.vue代码段：

<script setup>
import Home from "./components/Home.vue";
</script><template><Home/>
</template>

六、vuex中各种辅助函数的用法，可以使我们更加方便的运用vuex

1、…mapState

count(){return this.$store.state.count
},

等价于

...mapState(['count'  //参数是数组：原因是state中可能有多个属性
]),

2、…mapGetters

getterAge(){return this.$store.getters.getterAge
}

等价于：

...mapGetters(['getterAge'])

3、…mapMutations

…mapMutations：使用辅助函数后载荷的传参，直接在调用的地方进行传参便可

handlerAdd(){this.$store.commit("addCount",{num: 1})
},
handlerSub(){this.$store.commit("subCount",{num: 1})
},

等价于：

...mapMutations({handlerAdd: 'addCount',handlerSub: 'subCount'
})

4、…mapActions

handlerAddAnys(){this.$store.dispatch('addCountAsyn')
},
handlerSubAnys(){this.$store.dispatch('subCountAsyn')
}

等价于：

...mapActions({handlerAddAnys: 'addCountAsyn',handlerSubAnys: 'subCountAsyn'
})

修改上例中的Home.vue组件

【Vuex---状态管理器的使用】相关推荐

flux react php,Vue的Flux框架之Vuex状态管理器
学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 Re ...
vue项目的状态管理器(Vuex)
一.什么是vuex Vuex是vue项目的状态管理器(状态管理工具).vue项目的状态是通过vue实例(组件)绑定的变量来体现.所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件 ...
Vue状态管理器state（Vuex）
一.什么是Vuex Vuex是一个专为Vue.js应用程序开发的状态管理模式采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化二.什么是状态管理模式状态自管 ...
Vue的状态管理器：Vuex
无需原生开发基础,也能完美呈现京东商城.<混合开发京东商城系统,提前布局大前端>课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合开发经典电商APP--京东.课程将各 ...
打造微信小程序伪状态管理器
以 app.js 的全局属性为基础,用消息订阅与发布对全局属性进行管理以 vuex 为例,app.js 全局属性就是 state,消息发布就是 actions ,消息订阅就是 mutations 1 ...
Vue项目成员管理系统 Vuex状态管理(10)
Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式储存管理应用的所有组件的转台并以相应的规则保证装填以一中可预测的方式发生变化. Vuex可以将组件中的某些属性.值或者方法拿出来统 ...
vuex状态管理，用最朴实的话讲解最难懂的技术，
一.案例演示引入vuex 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm n install vuex --save 需要注意的是这里一定要加上 –sa ...
[react] 状态管理器它精髓是什么？
[react] 状态管理器它精髓是什么? 统一的数据管理个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[react] 状态管理器解决了什么问题？什么时候用状态管理器？
[react] 状态管理器解决了什么问题?什么时候用状态管理器? 专注 view 层 React 官网是这么简介的.JavaScript library for building user inter ...
[react] 什么时候使用状态管理器？
[react] 什么时候使用状态管理器? 1用户的使用方式复杂 2.不同身份的用户有不同的使用方式(比如普通用户和管理员) 3.多个用户之间可以协作 4.与服务器大量交互,或者使用了WebSocket ...

【Vuex---状态管理器的使用】

目录

一、Vuex是什么？

二、什么时候使用Vuex

三、Vuex的核心概念和API

1、state

2、 mutations

3、 actions

4、 getters

5、 modules

四、Vuex的运作流程

五、应用举例

六、vuex中各种辅助函数的用法，可以使我们更加方便的运用vuex

1、…mapState

2、…mapGetters

3、…mapMutations

4、…mapActions

【Vuex---状态管理器的使用】相关推荐

最新文章

热门文章