Vuex-light NPM

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

vuex-light

npm downloads last commit

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

:bulb: Better DX - consistent and intuitive interface
:muscle: 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