Vue3+Vite+TS+Eslint下vuex的使用，从实例到优化

2023-10-28 17:48:03

在Vue3、Vite、TS和Eslint构建的项目中，引入Vuex是管理状态的有效方法，本文提供引入Vuex的详细指南，包括模块划分和Vuex源码类型声明推导，帮助开发者在项目中有效使用Vuex。

1. 引入Vuex

要将Vuex引入项目中，首先需要安装相关依赖，打开终端，依次执行以下命令：

npm install vuex

# or

yarn add vuex

然后在main.js中引入Vuex，配置store实例。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

2. 在组件中使用Vuex

在组件中使用Vuex，首先需要将store实例导入，然后就可以通过this.$store访问store，并使用getters、mutations和actions。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
    <button @click="incrementAsync">+</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync'])
  }
}
</script>

3. 模块划分

随着项目规模的增大，store中的状态可能会变得非常庞大，因此需要进行模块划分，将store中的状态按照功能进行拆分，形成多个模块，每个模块都有自己的state、mutations和actions。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    counter: {
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        incrementAsync ({ commit }) {
          setTimeout(() => {
            commit('increment')
          }, 1000)
        }
      }
    },
    cart: {
      state: {
        items: []
      },
      mutations: {
        addItem (state, item) {
          state.items.push(item)
        }
      },
      actions: {
        addToCart ({ commit }, item) {
          commit('addItem', item)
        }
      }
    }
  }
})

4. 类型声明推导

在Vuex中使用TypeScript时，可以使用类型声明推导功能，自动推导出store中state、mutations和actions的类型。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state: any) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }: any) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

这样就可以避免在Vuex中使用any类型，提高代码的可读性和可维护性。

5. 优化项目中的Vuex类型声明

除了使用类型声明推导功能之外，还可以对项目中的Vuex类型声明进行优化，使其更加准确和完善。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

interface State {
  count: number
}

interface Mutations {
  increment (state: State): void
}

interface Actions {
  incrementAsync ({ commit }: { commit: (mutation: string) => void }): void
}

export default new Vuex.Store<State, Mutations, Actions, {}>({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})