vuex的几个属性及其使用传参方式

目录
  • vuex概念
    • 1.1、组件之间共享数据的方式
    • 1.2、Vuex是什么
    • 1.3、使用Vuex同意管理状态的好处
  • vuex的基本使用
  • vuex的核心概念

vuex概念

1.1、组件之间共享数据的方式

父 向 子 传值:v-bind属性绑值

子 向 父 传值:v-on事件绑定

兄弟组件之间共享数据:EventBus

  • $on 接收数据的那个组件
  • $emit 发送数据的那个组件

1.2、Vuex是什么

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

1.3、使用Vuex同意管理状态的好处

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

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

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

1.4、什么样的数据适合存储到Vuex中

一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依然存储在组件自身的data中即可。

vuex的基本使用

1、安装vuex依赖包

npm i vuex --save

2、导入vuex包

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

3、创建stroe对象

const store = new Vuex.Store({
    //state中存放的就是全局共享的数据
	state:{count:0}
})

4、将store对象挂载到vue实例中

new Vue({
	el:'#app',
	render:h => h(app),
	router,
	//将创建的共享数据对象,挂载到vue实例中
	//所有的组件,就可以直接从stroe中获取全局的数据了
	store
})

vuex的核心概念

1、vuex中的主要核心概念如下

State

State提供唯一的公共数据源, 所有共享的数据都要统放到Store的State中进行存储。

export default new Vuex.Store({
  state: {
    count: 0
  },
})

组件访问State中数据的**第一种方式:**Addition.vue

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

<h3>当前最新的count值为:{{$store.state.count}}</h3>

组件访问State中数据的第二种方式: Subtraction.vue

// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

通过刚才导入的 mapState 函数,将当前组件需要的全局数据,映射为当前组件的 computed 计算属性:

<h3>当前最新的count值为:{{count}}</h3>

// 2. 将全局数据,映射为当前组件的计算属性
computed: {
 ...mapState(['count'])
}

Mutation

Mutation 用于变更 Store中 的数据。

只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。

② 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

第一种方式

(1)

// 定义 Mutation    store.js
 const store = new Vuex.Store({
 	state: {
 		count: 0
 	},
	mutations: {
 		add(state) {
 		// 不要在 mutations 函数中,执行异步操作
      	// setTimeout(() => {
      	//   state.count++
      	// }, 1000)
	 	// 变更状态
	 	state.count++
	 	}
 	}
 })

在组件中访问Mutation Addition.vue

 <button @click="btnHandler1">+1</button>

methods:{
	//触发mutation
    btnHandler1() {
	  //触发 mutations 的第一种方式
      this.$store.commit('add')
    },
}

(2)可以在触发 mutations 时传递参数:

 // 定义Mutation
 const store = new Vuex.Store({
 	state: {
 	count: 0
 	},
 	mutations: {
		 addN(state, step) {
 			// 变更状态
			 state.count += step
		 }
 	}
 })

在组件中访问Mutation Addition.vue

 <button @click="btnHandler2">+N</button>

  methods: {
    btnHandler2() {
      // commit 的作用,就是调用 某个 mutation 函数  携带参数
      this.$store.commit('addN', 3)
    },
  }

第二种方式

this.$store.commit() 是触发 mutations 的第一种方式,触发 mutations 的第二种方式:

// 1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数,将需要的 mutations 函数,映射为当前组件的 methods 方法:

// 2. 将指定的 mutations 函数,映射为当前组件的 methods 函数
methods: {
 ...mapMutations(['add', 'addN'])
}

完整代码:

//store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  // 只有 mutations 中定义的函数,才有权利修改 state 中的数据
  mutations: {
    //减减
    sub(state) {
      state.count--
    },
      //携带参数
    subN(state, step) {
      state.count -= step
    }
  },
})

在组件中Subtraction.vue

<h3>当前最新的count值为:{{count}}</h3>
<button @click="btnHandler1">-1</button>
//<button @click="btnHandler2">-1</button>
<button @click="subN(3)">-N</button>            -----携带参数

import { mapState, mapMutations} from 'vuex'

 computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    btnHandler1() {
      this.sub()
    },
 	//btnHandler2() {
      //this.subN(3)
    //},
  }

Action

(1)Action 用于处理异步任务。

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

第一种方式

(1)处理异步任务

// 定义 Action
 const store = new Vuex.Store({
	 // ...省略其他代码
	 mutations: {
 		add(state) {
 			state.count++
 		}
 	},
 	actions: {
 		addAsync(context) {
 			setTimeout(() => {
 				context.commit('add')
 			}, 1000)
 		}
 	}
 })

在组件中Addition.vue

<button @click="btnHandler3">+1 Async</button>

// 异步地让 count 自增 +1
btnHandler3() {
    // 这里的 dispatch 函数,专门用来触发 action
    this.$store.dispatch('addAsync')
},

(2)携带参数

触发 actions 异步任务时携带参数:

// 定义 Action
 const store = new Vuex.Store({
 	// ...省略其他代码
 	mutations: {
 		addN(state, step) {        -------------携带参数
			 state.count += step
 		}
 	},
 	actions: {
 		addNAsync(context, step) {   -------------携带参数
 			setTimeout(() => {
 				context.commit('addN', step)
 			}, 1000)
 		}
 	}
 })

在组件中

<button @click="btnHandler4">+N Async</button>

btnHandler4() {
      this.$store.dispatch('addNAsync', 5)
}

第二种方式

this.$store.dispatch() 是触发 actions 的第一种方式,触发 actions 的第二种方式:

// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

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

// 2. 将指定的 actions 函数,映射为当前组件的 methods 函数
methods: {
 ...mapActions(['addASync', 'addNASync'])
}

完整代码

export default new Vuex.Store({
  state: {
    count: 0
  },
  // 只有 mutations 中定义的函数,才有权利修改 state 中的数据
  mutations: {
    //减减
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    }
  },
  //actions可以处理异步任务
  actions: {
    subAsync(context) {
      setTimeout(() => {
        // 在 actions 中,不能直接修改 state 中的数据;
        // 必须通过 context.commit() 触发某个 mutation 才行
        context.commit('sub')
      }, 1000)
    },
    subNAsync(context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
  },
})

组件Subtraction.vue

<h3>当前最新的count值为:{{count}}
<button @click="subAsync">-1 Async</button>
<button @click="subNAsync(5)">-N Async</button>

import { mapState, mapMutations, mapActions } from 'vuex'

methods: {
    ...mapActions(['subAsync', 'subNAsync']),
}

**Getter **

不会修改state里面的数据

Getter 用于对 Store 中的数据进行加工处理形成新的数据。

① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。

② Store 中数据发生变化,Getter 的数据也会跟着变化。

// 定义 Getter
 const store = new Vuex.Store({
	state: {
 		count: 0
 	},
 	getters: {
 		showNum: state => {
 			return '当前最新的数量是【'+ state.count +'】'
 		}
 	}
 })

使用getters的第一种方式

this.$store.getters.名称

使用getters的第一种方式

{{showNum}}

import { mapGetters } from 'vuex'
computed: {
 ...mapGetters(['showNum'])
}
  • 只有 mutations 中定义的函数,才有权利修改 state 中的数据
  • actions 中,不能直接修改 state 中的数据必须通过 context.commit() 触发某个 mutation 才行
  • commit 的作用,就是调用 某个 mutation 函数
  • dispatch 函数,专门用来触发 action

到此这篇关于vuex的几个属性及其使用传参的文章就介绍到这了,更多相关vuex属性使用传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 说说Vuex的getters属性的具体用法

    什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 源码分析 wrapGetters初始化getters,接受3个参数,store表示当前的Store实例,moduleGetters

  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:

  • Vuex的actions属性的具体使用

    Vuex 的 action 属性内,可以定义异步操作逻辑,以满足某些业务场景要求.在组件内,是通过 $store.dispatch 来触发 action 定义的函数. 我们使用 action,来为计数器异步增 1. 1 Promise 方式 main.js: const store = new Vuex.Store({ state: { count: 0, }, mutations: { increment(state, n = 1) { state.count += n; } }, actio

  • 几分钟弄懂Vuex的五大属性和使用方式

    目录 一.Vuex是什么? 二.我们什么时候应该用到Vuex呢? 三.对于使用Vuex的理解是什么? 四.vuex由五部分组成(五种状态/五种属性) 五.安装配置 六.详解五种状态 1.state 2.mutations 3.action 基本使用 4.getters用法 5.modules 七.数据持久化 1.安装 2.使用 一.Vuex是什么? 介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 理解:核心就是 store(仓库),仓库是用来干什么的?你就当它用来储存东西的

  • 详解Vuex的属性

    目录 状态管理模式 Mutation需遵守Vue的响应规则 Vuex是专为Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说:Vuex是Vue框架中状态管理 图中绿色虚线包裹起来的部分就是Vue的核心,state中保存的就是公共状态,改变state的唯一方式就是通过mutations进行更改 状态管理模式 把组件的共享状态抽取出来,以一个全局单例模式管理.在这种模式下,组件数构成了一个巨大的视图,不管在树

  • vuex中的state属性解析

    目录 state属性介绍 state的使用 扩展 vuex的State 单一状态树 在Vue组件中获得 Vuex 状态 mapState辅助函数 state属性介绍 state属性是Vuex中用于存放组件之间共享的数据:也就是说,我们把一些组件之间共享的状态主要存放在state属性中:它采用的是单一状态树——用一个对象就包含了全部的应用层级状态.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快

  • Vuex给state中的对象新添加属性遇到的问题及解决

    目录 Vuex给state中的对象新添加属性遇到的坑 向vuex对象中增加新的属性需要注意 总结 Vuex给state中的对象新添加属性遇到的坑 state.js中有一个空对象obj: export default {   ...   obj: {} } 在App.vue中点击“给空对象增加属性”按钮,触发事件addObjAttr: <template>   <div id="app">     ...     <button @click="a

  • 详解Vuex的属性和作用

    目录 Vuex是什么? Vuex的5个属性 vuex 的 State 特性是? vuex 的 Getter 特性是? vuex 的 mauation 特性是? vuex 的 action 特性是? 什么情况下应该使用 Vuex? 总结 Vuex是什么? VueX是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). vuex 可以理解为一种开发模式或框架.比如 PHP 有 thinkphp ,java 有

  • 关于Vue组件间的常用传参方式

    目录 组件间常用传参方式 1. props.emit(最常用的父子通讯方式) 2. 事件总线EventBus(常用任意两个组件之间的通讯) 3.Vuex状态管理 vue组件传参记录 几个不太常用的组件传值方法记载 parent / children 传参调用方法 eventBus这个自己安装下 provide/inject 组件间常用传参方式 1. props.emit(最常用的父子通讯方式) 父传子 父组件传入属性,子组件通过props接收,就可以在内部this.XXX的方式使用 // 父组件

  • jQuery对象初始化的传参方式

    jQuery对象初始化的传参方式包括: 1.$(DOMElement) 2.$('<h1>...</h1>'), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第二个参数context指定上下文,其中context参数可以为$(...), DOMElement 3.$(function() {}); <===> $(document).ready(function() { }); 4.$({selector : '.c

  • 微信小程序页面间跳转传参方式总结

    前言 在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参.缓存和方法调用. URL传参 这种方式是最简单也是最常用的,这里就不做过多介绍了. 缓存 虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存. 使用缓存我们有两种方式:小程序自带Storage和vuex.因为我们的项目是基于mpvue的,顺带也用了vuex了 St

  • vue的传参方式汇总和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, }) 3,获取方法(在describe页面) $route.params.id 使用以上方法可以拿到上个页面传过来的id值 vue

  • Django使用HTTP协议向服务器传参方式小结

    目录 1.查询字符串数据(query string): 2. 提取请求体数据 2.1 表单类型请求体数据(Form Data) 2.2 非表单类型请求体数据(Non-Form Data):JSON 3. URL路径参数:提取URL路径中的特定部分数据 3.1 path()提取路径参数 3.2 re_path()提取路径参数 3.3 path()和re_path()如何选择? 4. 请求头 5. 其他常用HttpRequest对象属性 用户发送请求时携带的参数后端需要使用,而不同的发送参数的方式对

  • vue的自定义指令传参方式

    目录 自定义指令传参 指令 环境 传参方式 自定义指令动态参数 自定义指令传参 指令 在vue官网中,常用指令有v-model和v-bind,但是,如果我们需要对DOM元素进行底层操作,就需要用到自定义指令. 今天主要讲到传参的2种方式. 环境 vue2.3.3 node6.11.2 webpack2.6.1 传参方式 在main.js中定义一个指令. Vue.directive('zoom', {     bind: function (el, binding, vnode) {      

  • 详解angularjs的数组传参方式的简单实现

    初学 angularjs时,对 数组传参方式感到很好奇(['a', 'b', function(a,b){}]),它到底怎么实现的呢?后来由于工作很忙,对这个问题也就慢慢忘记了. 今天闲来无事,有想到了这个问题.最简单的方法就是查看他的源代码.无奈本人E文不好,不说看他的设计逻辑,仅看英文注释就够我头疼了.尝试闭门造车,最终竟然把车造出来了. 既然自己造的车,就要带上自己的名(取姓名拼音第一个字母),就叫他mqyJs把,下面是演示的调用方法: var app2 = mqyJs.applicat

  • Python函数定义及传参方式详解(4种)

    一.函数初识 1.定义:将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 2.好处:代码重用:保持一致性:可扩展性. 3.示例如下: # -*-coding:utf-8-*- def sayHello(): print('Hello world!') sayHello() 二.函数传参方式 如上面的实例是函数中最基础的一种,是不传参数的,说到这里,我们有必要了解一下何为函数参数: 1.函数参数: 形参变量: 只有在被调用时才分配内存单元,调用结束时,即刻释

  • Vue + Axios 请求接口方法与传参方式详解

    目录 一.Get请求: 二.Post请求: 三.拓展补充 使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法. 一.Get请求: Get请求比较简单,通常就是将参数拼接到url中 用? &连接或者用下面这种方式: this.axios.get(this.getWxQyUserInfoUrl, { params: { agentid: this.doLoginParams.agentid, code: this

  • vue路由传参方式的方式总结及获取参数详解

    目录 一.声明式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 二.编程式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 三.获取参数 1.params的获取方式 2.query的获取方式 四.需要注意的点 总结 一.声明式传参 1.params传参(显示参数) 在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数: //路由参数配置 const

随机推荐

其他