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>