stateX-vue

Table of Contents

1. Installation
2. Init store
3. Getters
4. Mutations
5. Methods
6. Computed
7. Watch
8. Modules
9. Config

Installation

• Init vue project
• Type this in console

npm i statex-vue

Init store

src/store/index.js

import {createStore} from "statex-vue";

export default createStore({
    data() {
        return {
            test: 0
        }
    }
});

or

export default createStore({
    data: {
        test: 0
    }
});

src/main.js

import { createApp } from 'vue';
import rootElem from './App.vue';
import store from "@/store";

let app = createApp(rootElem);

app.use(store);

app.mount('#app');

src/App.vue

<template>
{{store.global.test}}
</template>

result

Getters

src/store/index.js

export default createStore({
    data: {
        test: 0
    },
    getters: {
        getTest() {
            return this.global.test.value;
        }
    }
});

src/App.vue

<template>
  {{store.global.test}}
  {{store.global.getTest()}}
</template>

result

Mutations

src/store/index.js

export default createStore({
    data: {
        test: 0
    },
    mutations: {
        incrementTest() {
            this.global.test.value++;
        }
    }
});

src/App.vue

<template>
  {{store.global.test}}
  <button @click="store.global.incrementTest()">increment</button>
</template>

result

after click

Methods

src/store/index.js

export default createStore({
    data: {
        test: 0
    },
    methods: {
        incrementTest() {
            this.global.test.value++;
            console.log(this.global.test.value);
            return this.global.test.value;
        }
    }
});

src/App.vue

<template>
  {{store.global.test}}
  <button @click="store.global.incrementTest()">increment</button>
</template>

result

after click

Computed

src/store/index.js

export default createStore({
    data: {
        test: 8
    },
    computed: {
        test0() {
            return this.global.test.value * this.global.test.value;
        }
    }
});

src/App.vue

<template>
  {{store.global.test}}
  {{store.global.test0}}
</template>

result

Watch

src/store/index.js

export default createStore({
    data: {
        test: 0
    },
    watch: {
        test(newValue) {
            console.log("Variable changed", newValue);
        }
    }
});

src/App.vue

<template>
  {{store.global.test}}
  <button @click="store.global.test++">Change</button>
</template>

result

after 8 clicks

Modules

src/store/index.js

import array from "@/store/array";

export default createStore({
    modules: {
        array
    }
});

src/store/array.js

import { createStoreModule } from "statex-vue";

export default createStoreModule({
    data: {
        array: ["test", 0, 8, "abcd"]
    },
    getters: {
        getArray() {
            return this.array.array.value;
        }
    },
    mutations: {
        addElem(elem: any) {
            this.array.array.value.push(elem);
        }
    },
    computed: {
        double() {
            return [...this.array.array.value, ...this.array.array.value];
        }
    },
    methods: {
        a() {
            this.array.array.value = this.array.double.value;
            return this.array.array.value;
        }
    },
    watch: {
        array: {
            handler(newValue) {
                console.log("Variable changed", newValue);
            },
            deep: true
        }
    }
});

src/App.vue

<template>
  {{store.array.array}}
  <br>
  {{store.array.getArray()}}
  <br>
  {{store.array.double}}
  <br>
  <button @click="store.array.addElem(Math.random())">add</button>
  <button @click="store.array.a()">a</button>
</template>

result

Config

Name

src/store/index.js

export default createStore({
    data: {
        test: 0
    }
}, {
    name: "store0"
});

src/App.vue

<template>
{{store0.global.test}}
</template>

DefaultModuleName

src/store/index.js

export default createStore({
    data: {
        test: 0
    }
}, {
    defaultModuleName: "default"
});

src/App.vue

<template>
{{store.default.test}}
</template>

DefaultModuleName = ""

src/store/index.js

export default createStore({
    data: {
        test: 0
    }
}, {
    defaultModuleName: ""
});

src/App.vue

<template>
{{store.test}}
</template>