Vuex的详解和基本使用介绍

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-29 15:37   11   0

前言:

在进行真正介绍Vuex时先给大家引入一个基本的概念:状态管理器。何为状态管理器,简单的来说就是把你需要的数据(一般是所用的共享数据)放到一个存储里,简化自己的业务逻辑的操作。


Vuex的简介:

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

举个例子:

组件之间传值,如果直接是父子组件之间传值,那就很简单了,直接用属性绑定,然后子组件用props接受就行。子组件传递父组件数据直接用子组件调用父组件的方法用$emit()就可以,但是如果跨组件传值就比较麻烦了,如果从传统的方法,一层层的传值,这必然很麻烦也容易出错。上图可能更容易理解。

如上图:

左面的图就是普通的传值。右面的图就是Vuex。明显看出来两者差别。右面Store就是存储数据的,如果组件之间的数据传递都可以放到Store里,需要的时候就可以从Store取。


Vuex的优点:

①:能够Vuex集中管理共享数据,易于开发和后期维护。

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

③:存储在Vuex中数据都是响应式的,能够保持与页面数据同步时时更新(类似于v-model)


Vuex的使用:

①:安装vuex依赖包

npm install vuex --save

②:导入vuex包

import VueX from 'vuex'
Vue.use(Vuex)

③:创建store对象

const store = new Store({})

④:挂载到Vue实例上


Vuex中几个常见属性简单介绍:

state:提供公共数据源,所有的共享数据都要保存到state中

mutations:是对state中数据修改的唯一一个合法的途径,在这里我们可以定义自己的方法修改数据。

actions:是对数据进行异步操作的时候进行在这里定义自己的方法然后间接地调用mutations里的方法实现数据的修改。

getters:可以在对state中的数据进行封装,然后得到你想要的数据。


下面给大家介绍各个属性的怎样使用:

state:(两种方式)

①:方式一

②:方式二

mutations:(两种方式)

①:方式一

②:方式二

actions:(两种方式)

①:方式一

②:方式二

getters:(两种方式)

①:方式一

②:方式二


结尾:

分享:

从来没有做过贼,却想偷个幸福给你!从来没有坑过人,却想骗个快乐给你!从来没有害过谁,却想拐个开心给你!从来没有赖过谁,却想抢个平安给你!x你一生一世,争取这些坏事都尽力!

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP