- Robust typescript support ๐ช
- Consistent and intuitive interface ๐ก
- Implement with vue 3 reactivity system only
- Light weight
via npm
yarn add vuex-light
via cdn
<script src="https://unpkg.com/vuex-light@latest"></script>
Create the simplest store:
// store.ts
import { createStore } from 'vuex-light'
// Create a new store instance.
export const store = createStore({
state: {
count: 0,
},
mutations: {
increment({ state }) {
state.count++
},
},
})
Now, your can access the store by the following ways:
-
// main.ts // Adds the $store property that can be accessed in any component instance inside the application. app.config.globalProperties.$store = store app.component('child-component', { mounted() { console.log(this.$store.state.count) }, })
Example: Hello world
-
// main.ts import { createApp } from 'vue' import { store } from './store' const app = createApp({ inject: ['store'], template: ` <div> {{ store.state.count }} </div> `, }) // Sets the store that can be injected into all components within the application. app.provide('store', store)
Example: Counter
-
useStore
// store.ts // create the `useStore` composition function export function useStore() { return store }
// in a vue component import { defineComponent } from 'vue' import { useStore } from './store' export default defineComponent({ setup() { const { state, mutations } = useStore() return { state, mutations, } }, })
Example: Todo MVC
const store = createStore({
state: {
count: 0,
},
getters: {
isOdd({ state, getters }) {
// ...
},
},
mutations: {
increment({ state, getters, mutations }, ...payloads) {
// ...
},
},
actions: {
incrementIfOdd({ state, getters, mutations, actions }, ...payloads) {
// ...
},
},
})
store.state.count
store.getters.isOdd
store.mutations.increment()
store.actions.incrementIfOdd()
https://js-cosmos.github.io/vuex-light/vuex-light.createloggerplugin.html
https://js-cosmos.github.io/vuex-light/vuex-light.createpersistplugin.html
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License - see the LICENSE file for details