Vuex之Vuex【工具探索】

2023-10-01 04:05:50

Vuex是Vue.js应用程序的状态管理工具，它允许你在应用程序中集中管理和共享状态。Vuex可以帮助你解决Vue.js应用程序中常见的以下问题：

状态分散：在Vue.js应用程序中，状态可能分散在不同的组件中，这使得管理和维护变得困难。
数据共享：在Vue.js应用程序中，不同组件之间的数据共享可能会很困难，尤其是当组件位于不同的嵌套层级中时。
组件重用：在Vue.js应用程序中，重用组件可能很困难，因为组件的状态是分散的。

Vuex通过提供一个集中式存储来解决这些问题，该存储包含应用程序的状态。这使得管理和维护应用程序状态变得更加容易，也使数据共享和组件重用变得更加容易。

NPM和Yarn的安装方法

Vuex可以通过NPM或Yarn两种包管理工具安装。

NPM

npm install vuex

Yarn

yarn add vuex

文件目录结构

Vuex在项目中会创建一个名为store的目录，该目录包含以下文件：

index.js：这是Vuex的入口文件，它包含Vuex实例的创建。
actions.js：这是一个存放动作的目录，动作是提交变更到状态的函数。
getters.js：这是一个存放getter的目录，getter是获取状态的函数。
mutations.js：这是一个存放突变的目录，突变是直接更新状态的函数。
state.js：这是一个存放状态的目录，状态是应用程序的数据。

基本使用示例

以下是一个基本的使用Vuex的示例：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => {
      return state.count
    }
  },
  mutations: {
    increment: state => {
      state.count++
    }
  },
  actions: {
    incrementAsync: ({ commit }) => {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

export default store

// App.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

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

在TypeScript中使用Vuex

在TypeScript中使用Vuex与在JavaScript中使用Vuex非常相似。唯一的区别是需要在Vuex的安装和使用中添加类型支持。

// store/index.ts
import Vue from 'vue'
import Vuex from 'vuex'
import { GetterTree, MutationTree, ActionTree } from 'vuex'

Vue.use(Vuex)

interface State {
  count: number
}

const getters: GetterTree<State, State> = {
  getCount: state => {
    return state.count
  }
}

const mutations: MutationTree<State> = {
  increment: state => {
    state.count++
  }
}

const actions: ActionTree<State, State> = {
  incrementAsync: ({ commit }) => {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

const store = new Vuex.Store<State>({
  state: {
    count: 0
  },
  getters,
  mutations,
  actions
})

export default store

// App.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script lang="ts">
import { mapState, mapActions } from 'vuex'

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