在 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 来管理待办事项列表：
<code class="javascript">// 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
<template>
<div>
<input v-model="newTodo">
<button @click="addTodo">Add</button>
<ul>
<li v-for="todo in todos">{{ todo }}</li>
</ul>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: mapState(['todos']),
methods: mapMutations([
'addTodo',
'removeTodo'
]),
data() {
return {
newTodo: ''
}
}
};
</script></code>在这个示例中，Vuex 存储用于管理待办事项列表，组件使用 v-model 和 Vuex mapState 和 mapMutations 助手来访问和更新数据。
