vue - store

58 阅读1分钟

目录

- src - store

-module

export const ConfigModule = {
  state: {
    a: '',  //定义全局变量
  },
  mutations: {
    SET_NAME(state: any, data: string) {
      state.a = data
    },
  },
  actions: {
    setName({ commit }: any, data: string) {
      commit('SET_NAME', data)
    },
  },
  getters: {
    name: (state: any) => state.a,
  },
}

-index.ts

- 注册module中的文件
import { createStore } from 'vuex'
import { ConfigModule } from './modules/XXX'

const store = createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    a: XXX,
  },
})
export default store

使用XXX.vue

// 传入值
<script lang="ts" setup>
import { useStore } from 'vuex'
store = useStore()
store.dispatch('setName', '传入store中的值,与state的类型要一致') 

</script>

//使用值
<script lang="ts" setup>
const store = useStore()
const currentCenterId= store.getters.a
</script>