Vuex中状态管理器的使用详解

目录
  • 一、Vuex是什么?
  • 二、什么时候使用Vuex
  • 三、Vuex的核心概念和API
  • 四、应用举例
  • 五、vuex中各种辅助函数的用法,可以使我们更加方便的运用vuex

一、Vuex是什么?

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

Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。

而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action,但Action也是无法直接修改State的,还是需要通过Mutation来修改State的数据。最后,根据State的变化,渲染到视图上。

二、什么时候使用Vuex

不适用场景:小型简单应用,用 Vuex 是繁琐冗余的,更适合使用简单的store模式

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

多个视图依赖于同一状态:此时传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。

来自不同视图的行为需要变更同一状态此时采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护的代码

在这些情况下就适合用Vuex进行全局单例模式管理

三、Vuex的核心概念和API

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

1、state

1) vuex 管理的状态对象

2) 它应该是唯一的

const state = {
xxx: initValue
}

2、 mutations

1) 包含多个直接更新 state 的方法(回调函数)的对象

2) 谁来触发: action 中的 commit('mutation 名称')或者在组件中通过this.$store.commit(‘xxx’,params)使用。这个和组件中的自定义事件类似

3) 只能包含同步的代码, 不能写异步代码

const mutations = {
xxx(state, {data1}) {
// 更新 state 的某个属性
}
}

3、 actions

1) 提交 mutation,异步操作。包含多个事件回调函数的

2) 通过执行: commit()来触发 mutation 的调用, 间接更新 state

3) 谁来触发: 组件中通过this.$store.dispatch('action 名称', data1)

4) 可以包含异步代码(axios)

const actions ={
zzz ({commit, state}, data1){
commit('xxx', {data1})
}
}

4、 getters

1) 对数据获取之前的再次编译,可以理解为state的计算属性

2) 谁来读取: 组件中: this.$store.getters.xxx

const getters ={
xxx(state) {
return ...
}
}

5、 modules

1) 包含多个 module:store的子模块,为了开发大型项目,方便状态管理而使用的,即将store分割为模块,使store对象不会太臃肿。

2)一个 module 是一个 store 的配置对象

3) 与一个组件(包含有共享数据)对应

四、应用举例

1、安装:npm i vuex -S

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

import { createStore} from "vuex";
export default createStore({
    //vuex中的数据源,我们需要保存的数据就保存在这里,可以在组件通过 this.$store.state来获取我们定义的数据;
    state: {
        count: 0,
        age: 0
    },
    /*
      (1)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
      (2)通过属性访问Getter会暴露为 store.getters 对象,可以以属性的形式访问这些值:this.$store.getters.xxx
      (3)Getters 可以用于监听state中的值的变化,返回计算后的结果
    */
    getters: {
        getterAge(state){
            return state.age =25
        }
    },
    /*
       更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,并且Mutation 必须是同步函数
       在sotre.js中定义mutations对象,该对象中有两个方法,mutations里面的参数,第一个默认为state,
       其中第二个参数obj在官方文档就是载荷(payload),可以传入参数及对象。
       在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读
     */
    mutations: {
        addCount(state,obj){
            return state.count += obj.num
        },
        subCount(state,obj){
            return state.count -= obj.num
        }
    },
    actions: {
        addCountAsyn(context){
            setTimeout(()=>{
                context.commit('addCount',{
                    num: 1
                })
            },3000)
        },
        subCountAsyn(context){
            setTimeout(()=> {
                context.commit('subCount',{
                    num: 1
                })
            },2000)
        }
    }
})

3、在main.js文件中使用store

4、创建Home.vue组件

<template>
  <div>
    <h2>通过getter获得计算后的年龄:{{ getterAge }}</h2>
    <p>Count:{{ count }}</p>
    <button @click="handlerAdd()">加1</button>
    <button @click="handlerSub()">减1</button>
    <button @click="handlerAddAnys()">异步增加(2s后执行)</button>
    <button @click="handlerSubAnys()">异步减少(2s后执行)</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  computed: {
    count(){
      return this.$store.state.count
    },
    getterAge(){
      return this.$store.getters.getterAge
    }
   },
  methods: {
    handlerAdd(){
      this.$store.commit("addCount",{
        num: 1
      })
    },
    handlerSub(){
      this.$store.commit("subCount",{
        num: 1
      })
    },
    handlerAddAnys(){
      this.$store.dispatch('addCountAsyn')
    },
    handlerSubAnys(){
      this.$store.dispatch('subCountAsyn')
    }
   }
}
</script>

6、在App.vue中导入Home.vue

7、运行效果:

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

1、…mapState

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

等价于

...mapState([
  'count'
]),

2、…mapGetters

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

等价于

...mapGetters(['getterAge'])    

3、…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---状态管理器的使用的文章就介绍到这了,更多相关Vuex状态管理器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue的Flux框架之Vuex状态管理器

    学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 React 里面的 Redux 的状态管理器,用来管理Vue的所有组件状态. 为什么使用Vuex? 当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态. 遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理

  • Vuex中状态管理器的使用详解

    目录 一.Vuex是什么? 二.什么时候使用Vuex 三.Vuex的核心概念和API 四.应用举例 五.vuex中各种辅助函数的用法,可以使我们更加方便的运用vuex 一.Vuex是什么? Vuex在Vue项目开发时使用的状态管理工具.简单来说,就是对Vue的应用中多个组件的共享状态进行集中式的管理(读/写) Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取Sta

  • Vue中状态管理器(vuex)详解以及实际应用场景

    目录 Vue中 常见的组件通信方式可分为三类 Vuex简介 1. State 2. Getters 3. Mutations 4. Actions 5. 使用 mapState.mapGetters.mapActions 简化 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue中 provide.inject 详解及使用 Vue中

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • 使用Vue.observable()进行状态管理的实例代码详解

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况. 先看下官网描述,如下图 observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性的类型不变量而

  • Vuex中mutations与actions的区别详解

    区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用 devtools 追踪状态变化. 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步竞态怎么处理那是用户自己的事情. vuex 真正限制你的只有 mutation 必须是同步的这一点(在 redux 里面就好像 reducer 必须同步返回下一个状态一样).同步的意义在于这样每一个 mutation 执

  • 更强大的React 状态管理库Zustand使用详解

    目录 介绍 创建项目项目 安装项目依赖 创建项目结构 设置环境变量 服务 设置 store 清除/重置存储 介绍 在这篇文章中,我会介绍 Zustand 在实际项目中的使用. 我会构建一个 GitHub 用户搜索项目,在项目中通过调用 GitHub API 来实现搜索用户的功能.我还会并演示如何直接从 Zustand 存储中进行 API 调用,并将状态持久化到 sessionStorage 或 localStorage 中. 完成效果如下: 创建项目项目 首先,我们需要创建一个新的 React

  • Flutter状态管理Bloc使用示例详解

    目录 前言 两种使用模式 Cubit模式 最后 前言 目前Flutter三大主流状态管理框架分别是provider.flutter_bloc.getx,三大状态管理框架各有优劣,本篇文章将介绍其中的flutter_bloc框架的使用,他是bloc设计思想模式在flutter上的实现,bloc全程全称 business logic ,业务逻辑的意思,核心思想就是最大程度的将页面ui与数据逻辑的解耦,使我们的项目可读性.可维护性.健壮性增强. 两种使用模式 首先第一步引入插件: flutter_bl

  • Spring Boot项目中定制拦截器的方法详解

    这篇文章主要介绍了Spring Boot项目中定制拦截器的方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Servlet 过滤器属于Servlet API,和Spring关系不大.除了使用过滤器包装web请求,Spring MVC还提供HandlerInterceptor(拦截器)工具.根据文档,HandlerInterceptor的功能跟过滤器类似,但拦截器提供更精细的控制能力:在request被响应之前.request被响应之后.视

  • vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数 mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: 1.在组件或界面中不使用mapGetter调用映射vuex中的getter 1.1 调用映射根部store中的getter <!-- test.vue --> <template> <div class="vuexReponse"> <div @click="changeVal">点击</di

  • Python中的上下文管理器相关知识详解

    前言 with 这个关键字,对于每一学习Python的人,都不会陌生. 操作文本对象的时候,几乎所有的人都会让我们要用 with open ,这就是一个上下文管理的例子.你一定已经相当熟悉了,我就不再废话了. with open('test.txt') as f: print f.readlines() 什么是上下文管理器? 基本语法 with EXPR as VAR: BLOCK 先理清几个概念 1. 上下文表达式:with open('test.txt') as f: 2. 上下文管理器:o

随机推荐