vuex的学习
Vuex 是一个用于 Vue.js 应用程序的状态管理模式。它可以帮助我们在应用程序中管理和共享数据,使得数据在不同组件之间更加简洁和高效地流动。
Vuex 的核心概念包括:
- State(状态):Vuex 使用一个集中的存储区域来存储应用程序的所有状态(数据)。这些状态可以通过 Vuex 的
state
对象访问。 - Getters(获取器):Getters 允许我们在组件中访问存储的状态,同时也可以对状态进行计算或处理。Getter 可以被看作是 store 的计算属性。
- Mutations(变动):Mutations 是用于修改状态的函数,但它们必须是同步的。每个 Mutation 都有一个字符串类型的事件类型和一个回调函数,通过调用该回调函数来修改状态。
- Actions(动作):Actions 类似于 Mutations,但是它们可以包含异步操作。它们可以用于处理异步任务,如网络请求,然后再通过调用 Mutations 来修改状态。
- Modules(模块):Vuex 允许将 store 分割成模块,每个模块拥有自己的 state、getters、mutations 和 actions。这样可以更好地组织和管理大型的应用程序状态。
Vuex 的使用步骤如下:
- 安装 Vuex:通过 npm 或 yarn 安装 Vuex。
- 创建一个 store:创建一个 store 对象,定义应用程序的状态、getters、mutations 和 actions。
- 在 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']) }
本文来自博客园,作者:NeverLateThanBetter,转载请注明原文链接:https://www.cnblogs.com/do-it-520/p/vuex.html
韶华易逝,不能虚度年华。