Vue组件间通信 Vuex的用法解析

上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库)。

首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了。我是通过npm方式安装的:

npm install vuex --save

安装好之后需要再main.js里全局引入:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)new Vue({el:'#app',store,components: { App },template: '<App/>'})

这样就完成了Vuex的安装。接下来就是Vuex的用法了:

Vuex有五个属性:State、Getter、Mutation、Action、Module。

1. State里放入的是仓库的数据,类似于js里的data:

import Vue from 'vue'
const modules = {
 state:{
 name: '小白'
 }
 namespaced: true
}
export default modules

把Vuex放入src下的store文件里,建一个新的组件modules,然后把他抛出来,被引入所需数据的组件:

<script>
import { mapState }from 'vuex'
export default {
 computed:{
 // name(){
 // return this.$store.state.name
 // }
 ...mapState(['name'])
 },
 mounted(){
 console.log(this.name)
 }
}
</script>

Vuex里的数据需要从计算属性(computed)里获取,我写了两种我常用的方法,都可以接收到数据,在mounted钩子里打印出的数据:

这里只是举个例子教大家如何用,不建议大家向我这样去写,Vuex应该用于所有业务逻辑的数据。不涉及到业务逻辑的,建议大家用上一章的方法:Vue组件间通信。

2. Getters里放入State里数据的扩展数据,可以把它当作计算属性。比如State里有一个数组,就可以从Getters里获取到数组的长度,或是取到对象里面的属性,用法和计算属性类似:

import Vue from ‘vue'

const modules = {
 state:{
 list:[
  {id :1,content: '第一条'},
  {id :2,content: '第二条'}
 ]
 },
 getter:{
 listLength: (state)=>{return state.list.length}
 },   namespaced: true}export default modules;

我在state里存了一个数组,然后getters计算出state里数组的长度,接下来就是在组件里接收了:

<script>
import { mapGetters } from 'Vuex'
export default {
 compoted:{
 ...mapGetters(['listLength'])
 },
 mounted(){
 console.log(this.listLegth)
 }
}
</script>

打开控制台打印出2,就是list数组的长度。

3. Mutations是保存在仓库的方法,这个方法只能用来改变state里面的数据,而且想要改变state里的数据只能用mutations里的方法,并且它里面的方法只能是同步的:

import Vue from 'vue'

const modules = {
 state:{
 name: '小黑'
 },
 mutations:{
 changeName(state){
  state.name = '小白'
 }
 },
 namespaced: true
}
export default modules;

还是那个例子,下面是组件调用方法:

<html>
<div>
 {{ name }}
 <el-button @click="changeName">改变名字</el-button>
</div>
</html>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
 compoted:{
 ...mapState(['name'])
 },
 methods:{
 ...mapMutations(['changeName'])
 }
}
</script>

页面渲染后为:

点击按钮之后为:

组件里的按钮通过调用Vuex里的mutation方法将Vuex里的state数据改变,只不过mutations方法只能同步的,涉及到接口的就不能在它里面写,怎么办的?往下看:

4. Actions和mutations一样都是Vuex里的方法,只不过他们有两个最大的不同:

(1) Actions里可以存放异步方法,而Mutations只能放同步的;

(2) Actions里不可以更改state里的数据,state里的数据只能在Mutations里更改。

Actions是什么方法?简单的说,它就是一个Promise方法,通过不同的状态执行不同的方法,执行方法可以是Actions里的方法,也可以是Mutations里的方法。

Actions我就不举例子了,因为大部分都用于axios请求接口,简单跟大家说说这个东西怎么使用:

import Vue from 'vue'
import request from '@/api/axios'

const modules = {
 state:{
 list:[]
 },
 actions:{
 getList({ commit }){
  // 调用接口方法
  request.getList()
  .then((response)=>{
  // commit用来分配mutations方法
  commit('getList',response)
  })
 }
 },
 mutations:{
 getList(state,response){
  state.list = response.data
 }
 }
}

简单利用actions异步方法分配给mutations方法,然后在mutations方法里给state里的数据赋值,取到接口数据。

commit用于分配mutations方法,dispatch用于分配actions方法,都需要传参进去。

组件调用其实和调用mutations方法类似:

<script>
import { mapState,mapActions } from 'vuex'
export default {
 computed:{
 ...mapState(['list'])
 },
 mounted(){
 this.getList()
 },
 methods:{
 ...mapActions(['getList'])
 }
}
</script>

这样就基本完成了vuex传值。

5. module可以把vuex分为不同的模块,使业务逻辑变得更清晰,更准确。在上面的代码里,有const modules,给它不同的名字就是分为不同的模块。不同的module可以存入不同的数据和方法,使用起来非常方便。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vuex 模块化使用详解

    前言 上回我们说了一下 vuex 的简单使用,最后面的时候有说了,由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块--从上至下进行同样方式的分割,今天我们也来简单了解一下他的使用,深入学习可能还是要去看官方文档 1 文件结构 文件结构的话,模块化的使用

  • 详解Vuex下Store的模块化拆分实践

    前言 最近的项目用到了 vue.js + vuex + vue-router 全家桶,版本为 >2.0,在搞Store的时候发现,圈子里大部分关于vuex的文章都是比较基础的Demo搭建方式,很少有涉及到比较复杂的模块化拆分的Store实践,而且事实上也有朋友在实践中问到过这方面的内容,vuex自身提供了模块化的方式,因此在这里总结一下我自己在项目里的心得. 模块化拆分 vue.js的项目文件结构在这里就不说了,大家可以通过vue-cli初始化项目,脚手架会为你搭建一个start项目的最佳实践.

  • vuex vue简单使用知识点总结

    vue概念:vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据: 配置vuex的步骤: 1.运行cnpm i vuex -S 2.导包 import Vuex from 'vuex' 3.将vuex注册到vue中 Vue.use(Vuex) 4.new Vuex.Store() 实例,得到一个 数据仓储对象 var store = new Vuex.Store({ state: { // 大家可以把

  • vuex 动态注册方法 registerModule的实现

    Vuex(2.3.0+)可以用store.registerModule方法在进入路由时进行注册,离开路由时候销毁 actions, mutations, getters, state,在一定范围内相同名称不会被覆写 例子 index.js 传this 的写法 module.exports = { install(_this) { _this.$store.registerModule(['abc'], { namespaced: true, state: { rightTest: 999 },

  • 详解vuex的简单todolist例子

    一个简单的vuex应用的小例子,一段自己的学习记录. todolist就是一个简单的输入框,一个按钮,一个文本显示区域,可以逐条进行删除. 1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码,先删除所有的自带代码 <template> <div class="hello"> <input type="text"> <button>增加事项</button> <ul> &l

  • Vue组件间通信 Vuex的用法解析

    上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过npm方式安装的: npm install vuex --save 安装好之后需要再main.js里全局引入: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)new Vue({el:'#app',store,components

  • vue组件间通信六种方式(总结篇)

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

  • 超详细的vue组件间通信总结

    目录 前言 一.props.$emit单向数据流 二.$parent.$children 三.$attrs.$listeners 四.provide.inject 五.eventBus(事件总线) 六.vuex 七.localstorage 总结 前言 组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attrs.$listeners provide.in

  • vue组件间通信解析

    组件间通信(父子,兄弟) 相关链接\组件通信:点击查看 学习链接:Vue.js--60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法(一) 属性传递 props //子组件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export defa

  • Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)

    前言 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.

  • vue组件间通信子与父详解(二)

    接着vue组件父与子通信详解继续学习. 二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } } ②绑定事件处理函数 事件一般情况 都是自定义事件 <child-component @myEvent="recvMsg"></child-component> ③在子组件触发

  • vue组件间通信全面讲解

    目录 前言 组件介绍 一.父传子 1. 父组件通过 props 传递数据给子组件 2. 定义props的类型和默认值 二.子传父 子组件通过 $emit 传递数据给父组件 三.非父子组件间数据传递 1.通过公有的父组件进行非父子组件间的通信 2. 通过使用一个空的 Vue 实例作为中央事件总线 小结 前言 本章我们将介绍组件间是如何实现数据通信的.包括父组件向子组件.子组件向父组件.兄弟组件.非关系组件之间的数据通信. 组件通信是组件式开发中非常重要的一部分,也是组件式开发中的难点. 组件介绍

  • Vue如何实现组件间通信

    1. 父子间通信 最常见的就是父子之间的通信,通信是双向的数据传递. 1.1 父组件 --> 儿子组件 父组件向儿子组件传递数据的方式就是 通过 Prop 向子组件传递数据. //child.vue <template> <div> 我是儿子,我收到来自父亲的数据为 {{value}} </div> </template> <script> export default { props:{ value: String } } //App.v

  • Vue常见组件间通信方案及典型应用场景详解

    目录 什么是组件通信 1.父子组件通信场景 2.兄弟组件通信场景 3.根组件和后代组件通信场景 4.插槽通信场景 5 无直接关系的组件通信场景 6 大型项目中的复杂组件通信场景 - Vuex状态管理 7 其他的一些组件通信方案 总结 什么是组件通信 所谓组件通信,就是组件之间的数据交互,也就是把一个组件A里面的数据传递到另一个组件B,并能够让组件B根据这个数据更新界面. 在 Vue中,可用的通信方案有很多,下面给大家描述几个常用的组件通信方案及其典型的应用场景. 1.父子组件通信场景 父子组件通

  • Vue 父子组件、组件间通信

    本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"

随机推荐