vuex详解从入门到实战

1.1 vuex是什么

是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据的共享

1.2 使用vuex统一管理状态的好处

能够在vuex中集中管理共享的数据,易于开发和后期维护

能够高效的实现组件之间的数据共享,提高开发效率

存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步

1.3 什么样的数据适合存储到vuex中

只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据依旧存储在组件中自身的data中即可

1.4 vuex基本使用

(1)安装vuex依赖包

npm install vuex --save

(2)导入vuex包

import Vuex from ‘vuex’

Vue.use(Vuex)

(3)创建store对象

const store = new Vuex.Store({

state: { count: 0 }        //state中存放的就是全局共享数据

})

(4)将store对象挂载到vue中

vuex中主要的核心概念

State

提供唯一公共数据源,所有共享数据都要放到store的state中进行存储

组件访问state中的数据第一种方式:

this.$store.state.全局数据名称

组件访问state中的数据第二种方式:

1.从vuex中按需导入mapState函数

import {mapState} from ‘vuex’

2.将全局数据,映射为当前组件的计算属性

computed: {

...mapState(['count'])

}

Mutation

作用:用于变更store中的数据

如何触发调用mutation

第一种方式

第一种方式通过commit调用你需要的函数

可以在触发mutation时传递参数

第二种方式:

1.从vuex中按需导入mapMutation函数

2.将指定的mutation函数,映射为当前组件的methods函数

Action

作用:用于处理异步任务

第一种方式:

如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据

第二种方式

1.从vuex中按需导入mapMutation函数

2.通过刚才导入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法

Getter

作用:用于对store中的数据进行加工处理形成新的数据

怎么用:

第一种方式:this.$store.getters.名称

第二种方式:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vuex用法 前言: vuex, 是vue 的一个插件,作用是 对vue应用中多个组件的共享状态进行集中式的管理(...
    _Youarethehero阅读 338评论 0 0
  • 文章目录 一、Vuex概述[https://blog.csdn.net/u010358168/article/de...
    peterz博客阅读 852评论 2 8
  • 组件内的状态管理流程 每个组件都有自己的状态、视图和行为等组成部分。 state,驱动应用的数据源; view,以...
    表情帝3210阅读 1,045评论 0 3
  • vue的入门 按照官方的说法,vuex的定义是官方文档查传送门 Vuex 是一个专为 Vue.js 应用程序开发的...
    Weastsea阅读 354评论 0 0
  • 组件的关系: 父子关系:父传子:自定义属性 props; 子传父:自定义事件 $emit 非父子关系:vuex ...
    沃德麻鸭阅读 866评论 0 13