Vue中小型状态管理器observable

谁践踏了优雅 2022-11-26 01:52 156阅读 0赞

大型项目中的数据状态会比较复杂，一般都会使用 `vuex` 来管理。但在一些小型项目或状态简单的项目中，为了管理几个状态而引入一个库，显得有些笨重。

在 2.6.0+ 版本中，新增的 `Vue.observable` 可以帮助我们解决这个尴尬的问题，它能让一个对象变成响应式数据：

// store.js
    import Vue from 'vue'
    
    export const state = Vue.observable({ 
      count: 0 
    })

使用：

<div @click="setCount">{
       { count }}</div>

import {state} from '../store.js'
    
    export default {
        computed: {
            count() {
                return state.count
            }
        },
        methods: {
            setCount() {
                state.count++
            }
        }
    }

然你也可以自定义 `mutation` 来复用更改状态的方法：

// store.js
    import Vue from 'vue'
    
    export const state = Vue.observable({ 
      count: 0 
    })
    
    export const mutations = {
      SET_COUNT(payload) {
        if (payload > 0) {
            state.count = payload
        } 
      }
    }

使用：

import {state, mutations} from '../store.js'
    
    export default {
        computed: {
            count() {
                return state.count
            }
        },
        methods: {
            setCount() {
                mutations.SET_COUNT(100)
            }
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组结构双向绑定

这里我们声明一个叫 p的变量类型为我们上面定义的 Person 类类型然后new实例化一个Person 对象第一个参数字符串类型的小猫猫第二个参数 ...

「爱情、让人受尽委屈。」/ 2024年04月22日 07:30/ 0 赞/ 27 阅读

相关 Vue状态管理vuex

方网站：https://vuex.vuejs.org/zh/ 项目中安装vuex npm install vuex -S 在项目的src目录下新建一个目录s...

我会带着你远行/ 2024年04月20日 08:34/ 0 赞/ 96 阅读

相关设计模式之管理状态_Observer观察者模式_发送状态变化通知

前言 [博主github][github] [博主个人博客http://blog.healerjean.com][http_blog.healerjean.c...

淩亂°似流年/ 2024年04月17日 06:08/ 0 赞/ 64 阅读

相关 Vue状态管理(Vuex)

浅谈Vuex Question:Vuex状态管理跟使用传统全局变量有什么不同之处呢？ Answer： 1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex

谁践踏了优雅/ 2023年02月21日 11:46/ 0 赞/ 27 阅读

相关 vue:vuex(状态管理器)

Vuex ![vuex-store][] 最简单的store.js import Vue from 'vue' import Vuex from 'v

我会带着你远行/ 2023年02月20日 03:26/ 0 赞/ 19 阅读

相关 vue状态管理器基础使用（Vuex）

1. Vuex 概述 > 1.1 组件之间共享数据的方式 > > 父向子传值：`v-bind 属性绑定` > 子向父传值：`v-on 事件绑定` > 兄弟之

妖狐艹你老母/ 2023年01月20日 13:59/ 0 赞/ 241 阅读

相关 Vue中小型状态管理器observable

大型项目中的数据状态会比较复杂，一般都会使用 `vuex` 来管理。但在一些小型项目或状态简单的项目中，为了管理几个状态而引入一个库，显得有些笨重。在 2.6.0+ 版本中

谁践踏了优雅/ 2022年11月26日 01:52/ 0 赞/ 157 阅读

相关 Vue状态管理——Vuex

文章目录 1、序言 2、安装Vuex 3、基本用法 3.1 mutation 3.1.1 提交载荷（Payload）

男娘i/ 2022年08月31日 15:17/ 0 赞/ 342 阅读

相关在vue项目中引入vuex(全局状态管理器)

目录 Vuex是什么？ State Getter Mutation Action Module 项目结构 -------------------- V

灰太狼/ 2022年02月01日 01:13/ 0 赞/ 407 阅读

相关 vue之状态管理器vuex（三）

vuex通用使用方法一、安装配置 1、引入vuex 2、创建store

比眉伴天荒/ 2022年01月12日 07:57/ 0 赞/ 343 阅读