内容简介: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);
}
}
}
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Google模式
Eric Schmidt、Jonathan Rosenberg / 李芳齡 / 天下雜誌出版社 / 2014-11-7 / TWD 420.00
上市即登紐約時報暢銷書、Amazon科技經營排行榜TOP1 未上市即售出美、英、德、日、荷等12國版權 Google創辦人Larry Page專文推薦 第一本由Google領導團隊人首度公開的企業內部運作與思維 Google董事會執行主席艾力克.施密特獨家揭露 Google從崛起到稱霸超過10年的管理與工作秘笈, 以及如何吸引21世紀最搶手的人才-智慧創做者(S......一起来看看 《Google模式》 这本书的介绍吧!