脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue组件间通信 Vuex

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

 更新时间：2019年08月05日 08:24:19   作者：计算机-小白  
这篇文章主要介绍了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可以存入不同的数据和方法，使用起来非常方便。

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

您可能感兴趣的文章:

相关文章

  • Vue中的this.$emit()方法详解

    Vue中的this.$emit()方法详解

    这篇文章主要给大家介绍了关于Vue中this.$emit()方法的相关资料,this.$emit()是 Vue.js 中一个很有用的方法,可以帮助子组件向父组件传递事件,需要的朋友可以参考下
    2023-09-09
  • Vue.js Ajax动态参数与列表显示实现方法

    Vue.js Ajax动态参数与列表显示实现方法

    Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面通过本文给大家介绍vue.js ajax动态参数与列表显示实现方法，感兴趣的朋友一起看看吧
    2016-10-10
  • vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法

    vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法

    Vue.js是一个流行的JavaScript框架,它可以帮助开发者构建交互式Web应用程序,这篇文章主要给大家介绍了关于vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决办法,需要的朋友可以参考下
    2023-12-12
  • antd vue 如何调整checkbox默认样式

    antd vue 如何调整checkbox默认样式

    这篇文章主要介绍了antd vue 如何调整checkbox默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 一文带你了解vite对浏览器的请求做了什么

    一文带你了解vite对浏览器的请求做了什么

    Vite是一种新型前端构建工具,能够显著提升前端开发体验,下面这篇文章主要给大家介绍了关于vite对浏览器的请求做了什么的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • vue实现动态列表点击各行换色的方法

    vue实现动态列表点击各行换色的方法

    今天小编就为大家分享一篇vue实现动态列表点击各行换色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue使用canvas手写输入识别中文

    vue使用canvas手写输入识别中文

    这篇文章主要介绍了vue使用canvas手写输入识别中文，工作时遇到一些项目如：系统上的输入法使用不方便，客户要求做一个嵌入web网页的手写输入法。下面我们来看看文章得具体描述吧
    2021-11-11
  • 基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)

    基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)

    前段时间的vue项目中用到了echarts柱状图,由于UI设计稿中要求使用渐变色,并且每个柱子的颜色不同,于是做了一番研究,现将我的实现方案分享如下
    2024-05-05
  • vue3不同语法格式对比的实例代码

    vue3不同语法格式对比的实例代码

    vue3发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,这篇文章主要给大家介绍了关于vue3不同语法格式对比的相关资料,需要的朋友可以参考下
    2021-08-08
  • vue引入组件的几种方法代码示例

    vue引入组件的几种方法代码示例

    vue的一个强大功能就是组件化开发,下面这篇文章主要给大家介绍了关于vue引入组件的几种方法,文中给出了详细的代码及图文介绍,需要的朋友可以参考下
    2024-04-04

最新评论