如何理解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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
Node.js + express基本用法教程
2019/03/14 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
实例详解Python模块decimal
2019/06/26 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
矿泉水广告词
2014/03/20 职场文书
煤矿安全保证书
2015/02/27 职场文书
论语读书笔记
2015/06/26 职场文书
银行岗位培训心得体会
2016/01/09 职场文书