如何理解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 相关文章推荐
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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 json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
可选择和输入的下拉列表框示例
2013/11/05 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
铭立家具面试题
2012/12/06 面试题
营销人才自我鉴定范文
2013/12/25 职场文书
党员入党表决心的话
2014/03/11 职场文书
财产公证书样本
2014/04/04 职场文书
法学院毕业生求职信
2014/06/25 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
安全伴我行主题班会
2015/08/13 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS