在 Vue.js 中存储和检索数据的方式包括：数据状态管理（Vuex、Pinia）、本地存储（localStorage、sessionStorage）、远程存储（REST API、GraphQL）和数据绑定（v-model、computed 属性）。例如，使用 Vuex 管理待办事项列表，组件通过 v-model 和 Vuex 助手访问和更新数据。
如何使用 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
- {{ todo }}
在这个示例中，Vuex 存储用于管理待办事项列表，组件使用 v-model 和 Vuex mapState 和 mapMutations 助手来访问和更新数据。
