vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
类别:编程学习 浏览量:1004
时间:2022-03-30 09:11:17 vue组件keep-alive的原理是什么
如何理解Vue简单状态管理之store模式目录
- 概述
- 1. 定义 store.js
- 2. 组件使用 store.js
- 3. 实现效果
store 状态管理模式的实现思想很简单,就是定义一个 store 对象,对象里有 state 属性存储共享数据,对象里还存储操作这些共享数据的方法。在组件中将 store.state 共享数据作为 data 的一部分或全部,在对 store.state 对象里的共享数据进行改变时,必须调用 store 提供的接口进行共享数据的更改。
以下以一个简单 todo-list demo 来介绍 store 状态管理模式
1. 定义 store.js//store.js export const store = { state: { todos: [ {text: '写语文作业', done: false}, {text: '做数学卷子', done: false} ] }, addTodo(str){ const obj = {text: str, done: false} this.state.todos.push(obj) }, setDone(index){ this.state.todos[index].done = true } }
//A.vue <template> <li class="A"> 我是 A组件 <ul> <li v-for="(todo,index) in todos" :key="index" :class="todo.done?'done':''" @click="setDone(index)"> {{todo.text}} </li> </ul> </li> </template> <script> import {store} from '../store/store.js' export default { name: 'A', data(){ return store.state }, methods: { setDone(index){ store.setDone(index) } } } </script> <style scoped> .A{ background: red; color: white; padding: 20px; } .A li.done{ background: green; } </style>
//B.vue <template> <li class="B"> <li> 我是 B 组件,在下方输入框输入任务在 A组件 中添加任务 </li> <input type="text" v-model="text"> <button @click="addTodo">add todo</button> </li> </template> <script> import {store} from '../store/store.js' export default { name: 'B', data(){ return { text: '' } }, methods:{ addTodo(){ if(this.text){ store.addTodo(this.text) } } } } </script> <style scoped> .B{ background: yellow; padding: 20px; } </style>
//App.vue <template> <li id="app"> <A /> <B /> </li> </template> <script> import A from './components/A.vue' import B from './components/B.vue' export default { name: 'App', components: { A, B } } </script>
可以看到,在 A组件 中显示的数据,在 B组件 中进行添加和修改,就是通过数据共享的方式进行数据通信,简单的 store模式 就是这样的运用方式。
以上就是如何理解Vue简单状态管理之store模式的详细内容,更多关于Vue简单状态管理之store模式的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue设置属性没响应(Vue.$set 失效的坑 问题发现及解决方案)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vueweb端聊天(Vue实现聊天界面)
- vue插槽实例(Vue中插槽slot的使用方法与应用场景详析)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue应用转flutter(Vue和Flask通信的实现)
- vue统计代码行数(vue实现计数器简单制作)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue实现列表向上滚动更新(vue实现列表无缝滚动)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
热门推荐
- dedecms添加站点(dedecms 栏目列表页链接优化方法)
- sqlserver查询自定义时间数据(SQLServer查询某个时间段购买过商品的所有用户)
- HttpWebResponse类的属性和方法
- apache中配置虚拟主机的作用(apache基于端口创建虚拟主机的示例)
- laravel怎么同时连接数据库(Laravel框架实现多个视图共享相同数据的方法详解)
- sql server语法大全(Sql Server的一些知识点定义总结)
- 怎么把织梦的dede改掉(织梦dedecms 提示 body has not allow words 问题解决)
- react的动画实现(React实现动效弹窗组件)
- python中怎么查看函数的用法(Python中函数的基本定义与调用及内置函数详解)
- docker部署kafka认证(docker-compose部署zk+kafka+storm集群的实现)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9