526互联

vuex的学习

发布时间 2023-06-14 09:48:27作者: NeverLateThanBetter

Vuex 是一个用于 Vue.js 应用程序的状态管理模式。它可以帮助我们在应用程序中管理和共享数据，使得数据在不同组件之间更加简洁和高效地流动。

Vuex 的核心概念包括：

  1. State（状态）：Vuex 使用一个集中的存储区域来存储应用程序的所有状态（数据）。这些状态可以通过 Vuex 的 state 对象访问。
  2. Getters（获取器）：Getters 允许我们在组件中访问存储的状态，同时也可以对状态进行计算或处理。Getter 可以被看作是 store 的计算属性。
  3. Mutations（变动）：Mutations 是用于修改状态的函数，但它们必须是同步的。每个 Mutation 都有一个字符串类型的事件类型和一个回调函数，通过调用该回调函数来修改状态。
  4. Actions（动作）：Actions 类似于 Mutations，但是它们可以包含异步操作。它们可以用于处理异步任务，如网络请求，然后再通过调用 Mutations 来修改状态。
  5. Modules（模块）：Vuex 允许将 store 分割成模块，每个模块拥有自己的 state、getters、mutations 和 actions。这样可以更好地组织和管理大型的应用程序状态。

Vuex 的使用步骤如下：

  1. 安装 Vuex：通过 npm 或 yarn 安装 Vuex。
  2. 创建一个 store：创建一个 store 对象，定义应用程序的状态、getters、mutations 和 actions。
  3. 在 Vue 组件中使用：通过在 Vue 组件中导入 store，可以访问状态、触发 mutations 或 actions。

下面是一个简单的示例：

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

Vue.use(Vuex)

new Vue({
  store,
  // ...
})

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

Vue.use(Vuex)

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

export default store

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

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

在上述示例中，我们定义了一个简单的 store，包含了一个状态 count、一个 mutation increment 和一个 action incrementAsync。在组件 MyComponent 中，我们使用了 mapState、mapGetters 和 mapActions 辅助函数来简化对状态和操作的引用。这样，组件就能够访问状态，并通过按钮点击触发相应的 mutation 或 action 来更新状态。
总结起来，Vuex 提供了一个集中式的状态管理方案，使得应用程序的状态管理更加清晰、可预测和易于调试。它通过统一的规则和模式，简化了组件之间的通信，提供了更好的代码组织和可维护性。

vuex中四种核心的使用方式

state

state 提供唯一的数据资源,所有的共享的数据都要统一放到store 中的state中进行存储

  • 1
    this.$store.state.全局数据名称
  • 2
1.从vuex中按需求导入mapState函数
import {mapState} from 'vuex'
通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
2. 将全局数据，映射为当前组件的计算属性
computed :{ ...mapState(['count']) }

mutation

mutation用于变更store中的数据
只能通过mutation更Store数据，不可以直接操作Store中的数据。
通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

  • 1
    this.$store.commit('方法名')
//store.js中定义mutations
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
   add(state) {
   //更改状态
    state.count++
   }
  }
})
//组件中接收触犯mutations
methods: {
    add() {
      this.$store.commit('add')
    },

  },



//mutations可以传递参数
 mutations: {
   add2(state,step) {
    state.count += step
   }
  }
//触发带参数的mutation
methods: {
    add() {
      this.$store.commit('add',3)
    },

  }
  • 2
1.从vuex中按需求导入mapState函数
import {mapMutations} from 'vuex'
通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
2. 将指定的mutations函数,映射为当前组件的methods函数
methods:{ ...mapMutations(['add']) }

action

如果通过异步操作变更数据，必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。

  • 1
    this.$store.dispatch('方法名')
//定义store.js 中定义action
  actions: {
    addAsync(context) {
      setTimeout(()=> {
        context.commit('add')
      },1000)
    }
  }


//在事件方法中通过dispatch触发action
add () {
    //  触发action
    this.$store.dispatch('addAsync')
  }

  mutations: {
   add(state,step) {
    state.count += step
   }
  },
  actions: {
    addAsync(context,step) {
      setTimeout(()=> {
        context.commit('add',step)
      },1000)
    }
  }
//触发action
add () {
    this.$store.dispatch('addAsync',5)
  }
  • 2
1.从vuex中按需求导入mapState函数
import {maptActions} from 'vuex'
通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
2. 将指定的mutations函数,映射为当前组件的methods函数
methods:{ ...maptActions(['addAsync']) }

getter

Getter于对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据起到的是包装数据的作用
Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
Store 中数据发生变化，Getter 的数据也会跟着变化。

  • 1
    this.$store.getters.名字
//组件中调用
 {{$store.getters.showNum}}
 //store.js中定义
   getters: {
    showNum (state){
      return `当前最新的数据${state.count}`
    }
  }
  • 2
1.从vuex中按需求导入mapState函数
import {maptGetters} from 'vuex'
通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
2. 将指定的mutations函数,映射为当前组件的methods函数
computed :{ ...maptGetters(['showNum']) }