vue怎么存取数据

在 vue.js 中存储和检索数据的方式包括：数据状态管理（vuex、pinia）、本地存储（localstorage、sessionstorage）、远程存储（rest api、graphql）和数据绑定（v-model、computed 属性）。例如，使用 vuex 管理待办事项列表，组件通过 v-model 和 vuex 助手访问和更新数据。

(图1)

如何使用 Vue.js 存储和检索数据

在 Vue.js 中，数据存储和检索可以通过各种方式实现，具体取决于应用程序的需求。

数据状态管理

Vuex：一个集中的状态管理库，允许组件访问和修改共享状态。
Pinia：一个轻量级替代品，提供与 Vuex 类似的功能，但专注于可扩展性和性能。

本地存储

立即学习“前端免费学习笔记（深入）”；

localStorage：一种永久性存储机制，即使浏览器关闭也能保留数据。
sessionStorage：一种会话级存储机制，数据在会话结束时被清除。

远程存储

REST API：一种通过网络发送请求和接收响应的架构。
GraphQL：一种查询语言，允许客户端指定需要的特定数据。

数据绑定

v-model：一个指令，用于将输入元素绑定到 Vue.js 数据。
computed 属性：计算属性，从其他数据派生出新的响应式数据。

示例

假设我们有一个简单的待办事项列表应用程序。可以使用 Vuex 来管理待办事项列表：

// Vuex store
import Vuex from 'vuex';
const store = new Vuex.Store({
  state: {
    todos: []
  },
  getters: {
    getTodos: (state) => state.todos
  },
  mutations: {
    addTodo: (state, todo) => state.todos.push(todo),
    removeTodo: (state, todo) => state.todos = state.todos.filter(t => t !== todo)
  }
});

// 组件使用 Vuex