vuex-light

Features

• Robust typescript support 💪
• Consistent and intuitive interface 💡
• Implement with vue 3 reactivity system only
• Light weight

Installation

via npm

yarn add vuex-light

via cdn

<script src="https://unpkg.com/vuex-light@latest"></script>

Getting Started

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:

1. globalProperty

   // 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

2. provide/inject

   // 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

3. 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

Core API

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()

Plugins

createLoggerPlugin

https://js-cosmos.github.io/vuex-light/vuex-light.createloggerplugin.html

createPersistPlugin

https://js-cosmos.github.io/vuex-light/vuex-light.createpersistplugin.html

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details