如何理解Vue简单状态管理之store模式


Posted in Vue.js onMay 15, 2021

概述

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
    }
}

2. 组件使用 store.js

//A.vue
<template>
    <div class="A">
        我是 A组件
       <ul>
           <li v-for="(todo,index) in todos" 
           :key="index" :class="todo.done?'done':''" @click="setDone(index)">
           {{todo.text}}
           </li>
       </ul>
    </div>
</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>
    <div class="B">
        <div>
            我是 B 组件,在下方输入框输入任务在 A组件 中添加任务
        </div>
        <input type="text" v-model="text">
        <button @click="addTodo">add todo</button>
    </div>
</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>
  <div id="app">
    <A />
    <B />
  </div>
</template>

<script>

import A from './components/A.vue'
import B from './components/B.vue'

export default {
  name: 'App',
  components: {
    A,
    B
  }
}
</script>

3. 实现效果

如何理解Vue简单状态管理之store模式

可以看到,在 A组件 中显示的数据,在 B组件 中进行添加和修改,就是通过数据共享的方式进行数据通信,简单的 store模式 就是这样的运用方式。

以上就是如何理解Vue简单状态管理之store模式的详细内容,更多关于Vue简单状态管理之store模式的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
Vue如何实现组件间通信
May 15 #Vue.js
详解Vue的sync修饰符
May 15 #Vue.js
深入理解Vue的数据响应式
May 15 #Vue.js
详解Vue的options
May 15 #Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 #Vue.js
Vue接口封装的完整步骤记录
Vue全家桶入门基础教程
You might like
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP加密解密函数详解
2015/10/28 PHP
PHP 类与构造函数解析
2017/02/06 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
员工自我鉴定
2013/10/09 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
学校志愿者活动总结
2014/06/27 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
Python打包exe时各种异常处理方案总结
2021/05/18 Python
使用Redis实现实时排行榜功能
2021/07/02 Redis