WARNING: This package is no longer to be maintained, use Pinia instead.

vuex-light

Why

Have you ever wanted to have type-ahead feature or intelligense when commit a mutation or dispatch actions?

Have you want to use such a token which is saved in the store and you cannot inject useStore hook due to you aren't in setup lifecycle?

Features

• 💡 Better DX - consistent and intuitive interface
• 💪 Robust typescript support
• VM agnostic - you can directly import and use it anywhere, no matter whether in setup lifecycle or not.

Getting Started

Setup

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'

const store = createStore(
  // state
  {
    count: 0,
  },
  // getters
  {},
  // mutations
  {
    increment({ state }) {
      state.count++
    },
  },
)

export function useStore() {
  return store
}

<!-- ./App.vue -->
<template>
  Clicked: {{ store.state.count }} times.
  <button @click="store.mutations.increment">+</button>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { useStore } from './store'

  export default defineComponent({
    setup() {
      const { state, mutations } = useStore()

      return {
        state,
        mutations,
      }
    },
  })
</script>

API

Core

const store = createStore(
  // state
  {
    count: 0,
  },
  // getters
  {
    isOdd({ state, getters }) {
      // ...
    },
  },
  // mutations
  {
    increment({ state, getters, mutations }, ...payloads) {
      // ...
    },
  },
  // actions
  {
    incrementIfOdd({ state, getters, mutations, actions }, ...payloads) {
      // ...
    },
  },
  // modules
  {
    module: createStore(
      // state
      {
        moduleCount: 0,
      },
    ),
  },
)

store.state.count
store.getters.isOdd
store.mutations.increment()
store.actions.incrementIfOdd()
store.modules.module.state.moduleCount

Plugins

createLoggerPlugin

https://iendeavor.github.io/vuex-light/vuex-light.createloggerplugin.html

createPersistPlugin

https://iendeavor.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