Vuex: how to use modules in vuex4.0

[devin-huang]

Version

4.0.0-beta.4

import { createStore } from 'vuex'
import * as types from './mutation-type'

export default createStore({
  modules: {
    common: {
      namespaced: true,
      state: {
        device: '',
      },
      mutation: {
        [types.SET_DEVICE_LIST](state: any, device: string) {
          state.device = device
        },
      },
      actions: {
        findDeviceList: findDeviceList({commit}, params) {
            commit(types.SET_DEVICE_LIST, 'success')
        }
      },
   }
  },
})

output errpr:

[vuex] unknown local mutation type: SET_DEVICE_LIST, global type: common/SET_DEVICE_LIST

Steps to reproduce

when use vuex3.0 is ok, but vue4.0 use moduels is error, not to find commit path

What is expected?

how to vuex4.0 use modules the commit of mutation

[ux-engineer]

I'd like to add here that it would be great to have official examples for the modules with TypeScript as well.

@kiaking, in your recent conference talks you were showing Vuex shims with State type added... Could please review our working, but not yet fully right typed, example?

I just pieced together a working Github repo with a Codesandbox demonstration from previous examples done by the wider community, and what I found to be quirky about this approach: Using Vuex 4 modules in Vue 3 with TypeScript, and how to fix cyclical dependency linting error?

[devin-huang]

@ux-engineer thank you.

[dlodeprojuicer]

Also cant get it to work https://stackoverflow.com/questions/64349235/how-to-use-vuex-modules-in-vue-3

[dlodeprojuicer]

This answer worked for me. Change import * as types from './mutation-type' to import types from './mutation-type'

[soerenmartius]

I've posted a working, fully-typed example here: https://gist.github.com/soerenmartius/ad62ad59b991c99983a4e495bf6acb04

[yaquawa]

Hope there is an official way to do this.

[soerenmartius]

Hope there is an official way to do this.

Not sure about it. We might need to wait for Vuex5 to be released, since the maintainers mentioned already that they "aren't planning to rewrite the code base in TS for Vuex 3 or 4".

[ChenYCL]

same issues, here my way to achieve

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import  store from './store/index';

const app = createApp(App);
store.forEach(({modelName,key})=>{
    app.use(modelName,key)
})
app.mount("#app");

```
// store/index.ts

import count,{key as countKey} from "./count";
import model,{key as modelKey} from "./model";

const arr = [
{
modelName:count,
key:countKey
},
{
modelName: model,
key:modelKey
}
]

export default arr;

// store/count.ts
import {InjectionKey} from 'vue'; // store namespace
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface Props {
count: number
}

export const key: InjectionKey> = Symbol()

export default createStore({

state: {
    count:0
},

mutations: {
    increment(state) {
        state.count++
    },
    decrement(state) {
        state.count--
    }
}

})

export function useStore () {
return baseUseStore(key)
}

```Vue
// demo.vue
<template>
  <h1>{{ msg }}</h1>
  <p>count is {{ count }}</p>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</template>

<script>
import {useStore} from "../store/count";
import {computed} from "vue";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },


  setup(){
    const store = useStore()
    return {
      count:computed(() => store.state.count),
      increment:()=>store.commit('increment'),
      decrement:()=>store.commit('decrement')
    }
  }

};
</script>