vuex-facing-decorator

Binding helpers for Vuex and vue-facing-decorator

Designed for vue 3, do the same work like vuex-class.

Welcome to suggest and contribute.

Installation

1npm i vuex-facing-decorator

Dependencies

• Vuex
• vue-facing-decorator

Example

1import { h } from 'vue';
2import { Component, Vue } from 'vue-facing-decorator';
3import { Action, Getter, Mutation, namespace, State } from 'vuex-facing-decorator';
4
5const ModuleA = namespace('A');
6const ModuleB = namespace('B');
7
8@Component
9class Tests extends Vue {
10    // module global
11    @State name;
12    @State count;
13    @Getter doubleCount;
14    @Mutation mutationsIncrement;
15    @Action actionIncrement;
16    // module namespace_a
17    @State('name', {namespace: 'A'}) namespace_a_name;
18    @State('count', {namespace: 'A'}) namespace_a_count;
19    @Getter('doubleCount', {namespace: 'A'}) namespace_a_doubleCount;
20    @Mutation('mutationsIncrement', {namespace: 'A'}) namespace_a_mutationsIncrement;
21    @Action('actionIncrement', {namespace: 'A'}) namespace_a_actionIncrement;
22    // module namespace_b
23    @State('name', {namespace: 'B'}) namespace_b_name;
24    @State('count', {namespace: 'B'}) namespace_b_count;
25    @Getter('doubleCount', {namespace: 'B'}) namespace_b_doubleCount;
26    @Mutation('mutationsIncrement', {namespace: 'B'}) namespace_b_mutationsIncrement;
27    @Action('actionIncrement', {namespace: 'B'}) namespace_b_actionIncrement;
28    // module module_a
29    @ModuleA.State('name') module_a_name;
30    @ModuleA.State('count') module_a_count;
31    @ModuleA.Getter('doubleCount') module_a_doubleCount;
32    @ModuleA.Mutation('mutationsIncrement') module_a_mutationsIncrement;
33    @ModuleA.Action('actionIncrement') module_a_actionIncrement;
34    // module module_b
35    @ModuleB.State('name') module_b_name;
36    @ModuleB.State('count') module_b_count;
37    @ModuleB.Getter('doubleCount') module_b_doubleCount;
38    @ModuleB.Mutation('mutationsIncrement') module_b_mutationsIncrement;
39    @ModuleB.Action('actionIncrement') module_b_actionIncrement;
40    // module a2b
41    @ModuleA.State('name', {namespace: 'B'}) a2b_name;
42    @ModuleA.State('count', {namespace: 'B'}) a2b_count;
43    @ModuleA.Getter('doubleCount', {namespace: 'B'}) a2b_doubleCount;
44    @ModuleA.Mutation('mutationsIncrement', {namespace: 'B'}) a2b_mutationsIncrement;
45    @ModuleA.Action('actionIncrement', {namespace: 'B'}) a2b_actionIncrement;
46
47    render() {
48        return h('div', [
49            h('div', {class: 'g'}, this.count),
50            h('div', {class: 'namespace_a'}, this.namespace_a_count),
51            h('div', {class: 'namespace_b'}, this.namespace_b_count),
52            h('div', {class: 'module_a'}, this.module_a_count),
53            h('div', {class: 'module_b'}, this.module_b_count),
54            h('div', {class: 'a2b'}, this.a2b_count),
55        ]);
56    }
57}

Discussion

To discord https://discord.gg/DWvyAtua99