vue3+ts+vueX项目实战

vue3和2的使用还是有很大的不同的 vueX的写法，具体的代码

index.ts

import { createStore } from 'vuex'
// import createPersistedState from 'vuex-persistedstate'
import skin from './modules/skin'
interface States {
  skinId: number
  colorList: Array<string>
}

type states = States

// 创建一个新的 store 实例,createStore<states>这个是必须的
const store = createStore<states>({
  state() {
    return {
      skinId: 1,
      colorList: [],
    }
  },
  mutations: {},
  actions: {},
  modules: {
    skin,
  },
  //持久化数据
  // plugins: [
  //   createPersistedState({
  //     key: 'vuex', // 存储是的名字
  //     storage: window.localStorage,
  //   }),
  // ],
})

export default store

modeules/skin.ts

import { computed, reactive } from 'vue'
interface States {
  skinId: number
  colorList: Array<string>
  colorObj: object
}
const skin = {
  namespaced: true,
  state: (): States => ({
    skinId: 1,
    colorList: ['#FF963B', '#FFAD67', '#71BBFF', '#FF9797', '#B796FF'],
    colorObj: {//根据选择的style去设置对应的colorList
      1: ['#FF963B', '#FFAD67', '#71BBFF', '#FF9797', '#B796FF'],
      2: ['#FFAD67', '#FF963B', '#71BBFF', '#FF9797', '#B796FF'],
      3: ['', '', '', '', ''],
      4: ['', '', '', '', ''],
      5: ['', '', '', '', ''],
    },
  }),
  mutations: {
    updateSkin(state: any, id: number): void {
      state.skinId = id
    },
    updateColorList(state: any, id: number) {
      state.colorList = state.colorObj[id]
    },
  },
  actions: {},
  getters: {},
}

export default skin

组件中通过计算属性去变化

const colorList = computed(() => {
      return reactive(store.state.skin.colorList);
    });