Vuex Modern

✨ Features

• ⚡ Lightweight: Core rewritten using Vue 3 reactive & computed. No hidden Vue instances.
• 🔄 100% Compatible: Drop-in replacement for Vuex 4. Keeps your existing code working.
• 🛠 DevTools Support: Fully integrated with Vue DevTools (Timeline & Inspector).
• 📦 Built-in Form Mapping: Native support for getField / updateField (like vuex-map-fields).
• 🛡 TypeScript: Written in TypeScript with strict type definitions.
• 🧩 Modular: Full support for nested modules, dynamic registration, and namespacing.

📦 Installation

# pnpm
pnpm add vuex-modern

# npm
npm install vuex-modern

# yarn
yarn add vuex-modern

🚀 Usage

1. Basic Setup (Same as Vuex 4)

import { createApp } from 'vue'
import { createStore } from 'vuex-modern'

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

const app = createApp(App)
app.use(store)
app.mount('#app')

2. Composition API (useStore)

<script setup>
import { useStore } from 'vuex-modern'

const store = useStore()

function inc() {
  store.commit('increment')
}
</script>

<template>
  <button @click="inc">{{ store.state.count }}</button>
</template>

3. Built-in Two-Way Binding (vuex-map-fields)

No need to install extra libraries. vuex-modern includes getField, updateField, and mapFields out of the box.

Store Setup:

import { createStore, getField, updateField } from 'vuex-modern'

const store = createStore({
  state: {
    user: {
      name: '',
      email: ''
    }
  },
  getters: {
    getField // register built-in getter
  },
  mutations: {
    updateField // register built-in mutation
  }
})

Component Usage:

<script>
import { mapFields } from 'vuex-modern'

export default {
  computed: {
    // Two-way binding helper
    ...mapFields(['user.name', 'user.email'])
  }
}
</script>

<template>
  <input v-model="name">
  <input v-model="email">
</template>

🔍 Migration from Vuex 4

Option 1: Standard Migration

1. Uninstall vuex.
2. Install vuex-modern.
3. Replace imports globally:

   - import { createStore } from 'vuex'
   + import { createStore } from 'vuex-modern'

Option 2: Alias Install (Zero Code Changes)

If you want to keep using import ... from 'vuex' without changing your codebase, you can install vuex-modern as an alias for vuex.

Using pnpm / npm / yarn:

# pnpm
pnpm add vuex@npm:vuex-modern

# npm
npm install vuex@npm:vuex-modern

# yarn
yarn add vuex@npm:vuex-modern

This will update your package.json to look like this:

"dependencies": {
  "vuex": "npm:vuex-modern@^0.1.2"
}

🧪 Testing

We use Vitest for testing. The project passes all core unit tests from the official Vuex 4 repository.

pnpm test

📄 License

MIT