vue 不使用node.js 的情况下存储数据到.json文件

在Vue中，如果你不使用Node.js，可以使用浏览器的本地存储（localStorage）来存储数据，而不是直接将数据存储到.json文件中。LocalStorage是Web API提供的一种在浏览器中存储键值对的机制。

下面是一个简单的示例，演示如何使用localStorage在Vue中存储数据：

<template>
  <div>
    <input v-model="message" type="text" placeholder="输入消息">
    <button @click="saveData">保存</button>
    <button @click="loadData">加载</button>
    <div>{{ savedMessage }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      savedMessage: ''
    };
  },
  methods: {
    saveData() {
      localStorage.setItem('message', this.message);
    },
    loadData() {
      this.savedMessage = localStorage.getItem('message');
    }
  }
};
</script>

在上面的示例中，我们使用`localStorage.setItem()`方法将输入的消息保存到localStorage中，使用`localStorage.getItem()`方法从localStorage中获取已保存的消息，并将其显示在页面上。

请注意，localStorage只能存储字符串类型的值，因此如果需要存储复杂的数据结构（如对象或数组），需要先进行序列化和反序列化操作。你可以使用`JSON.stringify()`方法将数据序列化为字符串，并使用`JSON.parse()`方法将字符串反序列化为原始数据结构。

希望这个示例能对你有所帮助！