vue开发

neverSettle姜
127 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

现在我们大部分项目都是基于前后端分离开发的，我在工作中，我的职责就是基于Vue或者React去解决前端UI层面的工作，包括界面布局，网页的交互，数据通信等相关的工作。我们和后台（Java PHP Golang）进行协同开发，利用后台接口，完成前端所需要的功能

前端端分离开发流程（Vue）

M V VM model View ViewModel

Model提供数据

View界面展示

ViewModel 有数据，页面自动渲染

界面和数据

我们的界面靠数据渲染，我们首先要先解决的时template和data（state）的关系

<template>
    <div>
       {{ msg }}
    </div>
</template>
<script>
export default {
    data () {
        return {
            msg: "Hello Vue"
        }
    }
}
</script>

但是在写这些之前，我们的data（state）的数据结构是不清楚的，我们可以先查看后台接口文档上给的返回值类型，来判断data(state)的结构。我们可以写一个静态的数据，然后渲染template

数据和接口

接口是后台给的，我们在接口和数据的关系中，需要把接口中得到的数据设置给data(state)，因为渲染工作已经完成，数据设置后的那一刻，页面上就会有新的界面渲染。

data的流程

vuex的开发流程

开发流程

data版流程

不考虑路由，单纯些业务时，涉及到src/views/TopicData.vue、src/api/topic.js

  1. 创建路由组件 在views中创建我们的路由组件TopicsData.vue生成基本的vue组件结构
<template>  
</template>
<script>
export default {
}
</script>
<style>
</style>
  1. 配置对应的路由配置，在router/modules/topic.js
import Topic from '../../views/TopicsData.vue'
​
export default {
  path: "/topic",
  component: Topic
}
  1. 在组件中写入合适的data
export default {
  data () {
    return {
      topics: []
    }
  }
}
  1. 请求数据，把请求到的数据设置到data里 封装一个请求函数
getTopics () {
    // 调用请求数据的相关的方法
    getTopics().then(res => {
        this.topics = res.data.data
    })
}
  1. 在mounted中调用对应的封装的函数
mounted () {
    this.getTopics()
}
  1. 这个时候就可以获取到对应的数据，根据数据的结构，渲染我们的template
<template>
  <div>
    <div v-for="topic in topics" :key="topic.id">
        {{topic.title}}
    </div>
  </div>
</template>

vuex版本

不考虑路由，单纯些业务时，涉及到src/views/TopicVuex.vue、src/api/topic.js、src/store/modules/topic.js

第一个文件 调用action，使用state、渲染template

第二个文件 请求api的方法

第三个文件 存储state 修改state的mutation 获取数据的action

  1. 配置好路由，及路由组件 创建组件TopicsVuex.vue
<template>
  <div></div>
</template>
<script>
export default {
}
</script>

配置路由 可以通过 localhost:8080/#/topic 访问

  1. 在state上创建对应的数据 我们的vuex的模块放在store/modulex/topic.js
export default {
  namespaced: true,
  state: {
    topics: []
  }
}
  1. 在mutation上创建修改数据的方法
export default {
  ...,
  mutations: {
    setTopics (state, data) {
      state.topics = data
    } 
  }
}
  1. 在action创建请求后台接口的方法
import { getTopics } from "../../api/topics"

export default {
  ...,

  actions: {
    getTopics ({commit}) {
      getTopics().then(res => {
        commit('setTopics', res.data.data)
      })
    }
  }
}
  1. 在组件中dispatch action 第一种 利用 this.$store.dispatch
<template>
  <div></div>
</template>

<script>
export default {
  mounted () {
    this.$store.dispatch('topic/getTopics')
  }
}
</script>

<style>

</style>

第二种 利用mapActions

  1. 在组件中获取到state并渲染页面 在computed中获取数据 第一种，直接获取
computed: {
    topics () {
        return this.$store.state.topic.topics
    }
}

第二种，使用mapState 最后渲染页面

avatar
文章
阅读
粉丝