但是，vue 在数据交互时使用的是 ajax 请求，以及后端数据库来进行数据的交互，这种方式在开发时很常见。但是，有些小型项目并不需要使用数据库来进行数据交互，比如只需要获取本地数据，这时就不需要使用数据库。那么，在 vue.js 中如何实现不使用数据库的数据交互呢？
1. 使用 json 数据json 数据是一种轻量级的数据交换格式，它的语法规则很简单，数据结构清晰，适合于不需要使用复杂关系型数据库的小型项目。在 vue 中使用 json 数据进行数据交互十分简单，我们可以把 json 文件放在项目的 public 文件夹下，然后通过 axios 或 fetch 来进行数据请求。
// 在 public 文件夹下新建一个 data.json 文件{ data: [ { name: 小明, age: 18 }, { name: 小红, age: 20 } ]}
<!-- 在 vue 组件中使用 axios 获取 json 数据 --><template> <div> <ul> <li v-for="(item,index) in datalist" :key="index">{{item.name}}-{{item.age}}</li> </ul> </div></template><script>import axios from 'axios'export default { data () { return { datalist:[], } }, created () { axios.get('/data.json') .then(res => { console.log(res.data) this.datalist = res.data.data }) .catch(err => { console.log(err) }) },}</script>
2. 使用 mock 数据mock 数据是指模拟数据，也就是我们自己构造的数据，用于模拟真实的数据。它可以用来帮助前端开发者在没有后端接口的情况下进行开发，由于数据量较小，所以 mock 数据一般都是放在前端项目的本地（一般放在 src/mock 目录下）。在 vue 中集成 mock.js 也是比较简单的，我们可以通过在 main.js 中引入 mock.js，然后使用 express 来模拟后端接口。
// 安装 express 和 mockjsnpm i express mockjs -d// 在 src/mock/index.js 中定义接口返回的数据import mock from 'mockjs'let data = mock.mock({ data|10-20: [ { id|+1: 1, name: '@cname', age|18-25: 18, city: '@city', address: '@county(true)', img: @image(50x50,@color) } ]})mock.mock('/api/getdata', 'get', () => { return data})// 在 main.js 中引入 express 并注册中间件import express from 'express'const app = express()const port = 3000let apiroutes = express.router()import './mock'app.use('/api', apiroutes)app.listen(port, () => { console.log(`server running @${port}`)})// 在具体的组件中通过 axios 请求数据<template> <div> <ul> <li v-for="(item,index) in datalist" :key="index">{{item.name}}-{{item.age}}</li> </ul> </div></template><script>import axios from 'axios'export default { data () { return { datalist:[], } }, created () { axios.get('/api/getdata') .then(res => { console.log(res.data) this.datalist = res.data.data }) .catch(err => { console.log(err) }) },}</script>
3. 使用本地存储localstorage 是 web 存储机制中的一种方式，它能够在客户端存储一些简单的 key-value 数据，它的数据是以字符串的形式存储的，所以在存储对象和数组时需要进行序列化和反序列化。在 vue 中使用 localstorage 存储数据也很简单，我们可以在对数据进行增删改查的同时，把数据同步到 localstorage 中，这样下一次打开页面时就可以从 localstorage 中获取之前存储的数据。
<template> <div> <input type="text" v-model="inputval"> <button @click="add">添加</button> <ul> <li v-for="(item,index) in datalist" :key="index">{{item}}</li> </ul> </div></template><script>export default { data () { return { inputval: '', datalist:[], } }, methods: { add () { if (!this.inputval) return this.datalist.push(this.inputval) window.localstorage.setitem('datalist', json.stringify(this.datalist)) this.inputval = '' } }, created () { let localdata = window.localstorage.getitem('datalist') console.log(localdata) if (localdata !== null) { this.datalist = json.parse(localdata) } },}</script>
总结来说，对于小型项目来说，使用 json 数据、mock 数据和本地存储都是不错的选择。当然，对于大型应用来说，使用后端数据库进行数据交互仍然是首选的方案。本文主要介绍了如何在 vue.js 中实现不使用数据库的数据交互，对 vue 开发初学者来说有一定的参考价值。
以上就是vue.js中如何实现不使用数据库的数据交互的详细内容。