vue3.0中vuex模块化使用

vue3.0模块化

1. store的目录结构

2. store下的index.ts文件

import { createStore } from 'vuex'
import music from './music'
export default createStore({
  modules: {
    music
  }
})

3. 模块music下的各个ts内容（index.ts , state.ts, mutations.ts, actions.ts）

• index.ts

import state from './state'
import mutations from './mutations'
import actions from './actions'
export default {
     namespaced: true,
     state,
     mutations,
     actions
}

• state.ts, mutations.ts, actions.ts

export default {
      //state action mutations 内容
}

4. vuex在页面中的使用

<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "MusiclistDetail",
  setup() {
    // 实列化vuex
    const store = useStore();
    // 提交 commit
    store.commit("music/changeUrl", payload);
    // 提交 mutations
    store.dispatch("music/changeUrl",payload);
  },
});
</script>