State and reactivity in Vue

栏目: IT技术 · 发布时间: 4年前

内容简介:In one of myprevious articles, I mentioned how it is possible to design a simple state manager in Vue by usingIn Vue 2, a reactive store might look like this:We can provide the components with a basic

In one of myprevious articles, I mentioned how it is possible to design a simple state manager in Vue by using observable . The Observable API has been available in Vue since version 2 however, with version 3 the reactive object is no longer directly modified but proxied into. Let's have a look how both work in detail:

In Vue 2, a reactive store might look like this:

// store.js
export const store = Vue.observable({ orders: 0 });

We can provide the components with a basic dispatch function that will collect an action with a payload and that will take care of updating the state. Also, we might want to provide a getters helper so that the store values can be reached as computed properties:

// store.js
export function dispatch(type, payload) {
    switch(type) {
        case 'increment-orders':
            Object.assign(store, { orders: store.orders + payload });
            break;
        default:
            //
    }
}

export function getters(orders) {
    return {
        orders: () => store.orders
    }
}

In our Vue component, we register the getters and use dispatch to notify the store about a user event:

<template>
    I have {{ orders }} orders on my account. 
    <a @click="increment()">add order</a>
</template>

<script>
import { dispatch } from 'store';

return {
    computed: { ...getters() },
    methods: { 
        increment() {
            dispatch('increment-orders', 1); 
        } 
    }
};
</script>

Vue 3 and the Composition API

With the introduction of the Composition API , operating with reactive properties is much simpler. The above example could be easily refactored to follow the new constructs. Here, reactive replaced the functionaltiy that observable was providing:

// store.js
import { reactive } from 'vue';

export const store = reactive({ orders: 0 });

// Component.vue
import { store, dispatch } from './store';

export default {
    setup() {
        return { store };
    },
    methods:{
        increment() {
            dispatch('increment-orders', 1);
        }
    }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Mathematica演示项目笔记

Mathematica演示项目笔记

吴飞 / 清华大学出版社 / 2010-7 / 39.00元

Mathematica是由美国科学家斯蒂芬·沃尔夫勒姆(Stephen Wolfram)领导的Wolfram Research Inc.研究公司所开发的一体化计算引擎。《Mathematica演示项目笔记》结合Mathematica演示项目以及第6版和第7版的最新功能(动态交互性、即时三维图形、数值模拟和仿真、高效实时计算、集成语言系统、多核并行计算和数字图像处理等),讲解了符号计算、程序设计、算......一起来看看 《Mathematica演示项目笔记》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具