脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js引入vuex储存接口数据及调用

vue.js中引入vuex储存接口数据及调用的详细流程

 更新时间：2017年12月14日 10:09:54   作者：蓝调爵士  
这篇文章主要给大家介绍了关于在vue.js中引入vuex储存接口数据及调用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

前言

前几天在慕课网上看到黄轶老师的高仿饿了么app视频教程，在做接口设计的时候，我在想，这个接口能不能储存下来全局调用呢？而不是走很多次接口，管理起来也麻烦。

万能的vue果然有这个功能，那就是vuex。

Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构。它主要帮我们更好地组织代码，以及把应用内的的状态保持在可维护、可理解的状态。

如果你不太理解 Vue.js 应用里的状态是什么意思的话，你可以想象一下你此前写的 Vue 组件里面的 data 字段。Vuex 把状态分成组件内部状态和应用级别状态：

  • 组件内部状态：仅在一个组件内使用的状态(data 字段)
  • 应用级别状态：多个组件共用的状态

举个例子：比如说有一个父组件，它有两个子组件。这个父组件可以用 props 向子组件传递数据，这条数据通道很好理解。

具体的实现流程，当然是先安装了

npm install vuex --save（推荐使用淘宝镜像cnpm，具体实施请自行百度）

然后建立个store.js的文件来管理数据


里面的内容是这样的

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state:{
 },
 actions:{
 },
 mutations:{
 }
})

然后在main.js里面引入这个js文件

import store from './store.js'

然后就开始请求数据了，在mutations这个属性里写上

mutations:{
  getJson(){
   Vue.http.get('../data.json',{
    },{
    headers:{},
    emulateJSON:true
    }).then(response=>{
    this.state.newslist=response.data;
    },response=>{
     
    })
  }
 }

在这里写这样写是为了让actions调然后把数据存在state里面的，官网说这个是异步存数据，我理解的这个异步就跟ajax的异步加载一个意思，当然同步就是mutations了。但是异步的数据先写在mutations里面然后才能调用，所以就得在actions里面这样写

actions:{
  newJson(obj){
   obj.commit('getJson');
  }
 },

然后把把state写成这样

state:{
  newslist:[]
 },

这么写的目的是为了不报错，免得出现什么找不到之类的错误。

上面的newJson跟obj是我自定义的，你可以随便写，getJson就是mutations里面你要用的方法，方便等会分流用,这个getJson方法也可以加参数的，但参数必须是state，这个state就是上面state，不是自定义的。写死。

接下来在你的子组件里面就可以分流啦！

子组件里的代码是这样的：

import {mapState} from 'vuex';
computed:{
 ...mapState({
  goods:state=>state.newslist.goods,
  classMap:state=>state.classMap
 })
 }

在这里我自定义了个goods来代替state.newslist.goods，因为我的数据是

{
"goods":[]
}

这种格式，我嫌长，就缩短了下。

然后在html里面就可以直接调用了，这里贴一小块代码

<ul>
 <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
 <span class="text border-1px">
 <span class="icon" v-show="item.type>0">
 </span>
 {{item.name}}
  </span>
  </li>
</ul>

基本上流程就是这样

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • 如何使用Webpack优化Vue项目的打包流程

    如何使用Webpack优化Vue项目的打包流程

    在开发基于Vue.js的应用时,随着项目规模的扩大,单个文件的体积也会随之增长,特别是当涉及到大量的依赖库和复杂的业务逻辑时,本文将详细介绍如何使用Webpack来优化Vue项目的打包流程,需要的朋友可以参考下
    2024-09-09
  • 在vue项目中使用codemirror插件实现代码编辑器功能

    在vue项目中使用codemirror插件实现代码编辑器功能

    这篇文章主要介绍了在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-08-08
  • vue同一个浏览器登录不同账号数据覆盖问题解决方案

    vue同一个浏览器登录不同账号数据覆盖问题解决方案

    同一个浏览器登录不同账号session一致,这就导致后面登录的用户数据会把前面登录的用户数据覆盖掉,这个问题很常见,当前我这边解决的就是同一个浏览器不同窗口只能登录一个用户,对vue同一个浏览器登录不同账号数据覆盖问题解决方法感兴趣的朋友一起看看吧
    2024-01-01
  • vue elementUI el-form 数据无法赋值且不报错的问题及解决方法

    vue elementUI el-form 数据无法赋值且不报错的问题及解决方法

    vue项目中使用elementUI的el-form组件,里面有部分后端数据遍历的字段和部分确定的字段,遇到个问题遍历的字段可以修改值但是确定的几个字段无法修改值,下面小编给大家分享vue elementUI el-form 数据无法赋值且不报错的问题及解决方法,感兴趣的朋友一起看看吧
    2023-12-12
  • vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

    vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

    这篇文章主要介绍了vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2020-11-11
  • vue3实现H5表单验证组件的示例

    vue3实现H5表单验证组件的示例

    本文主要介绍了vue3实现H5表单验证组件的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue-router跳转方式的区别解析

    vue-router跳转方式的区别解析

    在Vue中，router-link称为声明式路由，:to绑定为跳转的目标地址，一种是通过name，另一种是path，这篇文章主要介绍了vue-router跳转方式的区别,需要的朋友可以参考下
    2022-12-12
  • 如何去除vue项目中的#及其ie9兼容性

    如何去除vue项目中的#及其ie9兼容性

    本篇文章主要介绍了如何去除vue项目中的#及其ie9兼容性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue Hook Event 深度解读

    Vue Hook Event 深度解读

    Hook Event 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能，本文重点给大家介绍Vue Hook Event 解读，感兴趣的朋友一起看看吧
    2023-01-01
  • Vue设置长时间未操作登录自动到期返回登录页

    Vue设置长时间未操作登录自动到期返回登录页

    这篇文章主要介绍了Vue设置长时间未操作登录以后自动到期返回登录页,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2020-01-01

最新评论