vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。用于较大型项目。
vuex使用场景:
1、用户的个人信息管理模块;
2、电商项目的购物车模块;
3、我的订单模块,订单列表中点击取消订单,然后更新对应的订单列表;
4、在订单结算页,获取需要的优惠券,并更新订单优惠信息。
vuex的核心概念:
1、state
// 组件内严禁直接改变state内的数据
// state提供唯一的公共数据源,所有共享的数据都要统一放到store的state中进行存储
state: {},
2、mutations
// mutations用以变更store中的数据,可以集中监控所有数据的变化
//*注意mutations内不能执行异步操作
mutations:{}
3、actions
//用于执行异步操作
actions:{}
4、getters
/*
*getters用于对store中的数据进行加工处理形成新的数据
*getters可以对stroe中已有的数据加工处理之后形成新的数据,类似vue中的计算属性
*store中数据发生变化,getter的数据也会跟着变化
*/
getters: {},
以下是使用计数器的小demo
store.js文件代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 组件内严禁直接改变state内的数据
// state提供唯一的公共数据源,所有共享的数据都要统一放到store的state中进行存储
state: {
count: 0
},
/*
*getters用于对store中的数据进行加工处理形成新的数据
*getters可以对stroe中已有的数据加工处理之后形成新的数据,类似vue中的计算属性
*store中数据发生变化,getter的数据也会跟着变化
*/
getters: {
showNum(state){
return '当前最新的数量是【'+state.count+'】'
}
},
// mutations用以变更store中的数据,可以集中监控所有数据的变化
mutations: {
// mutations函数内不能执行异步操作,如setTimeout
add(state) {
state.count++
},
// 接参
addN(state, step) {
state.count += step
},
sub(state) {
state.count--
},
subN(state, step) {
state.count -= step
},
},
// actions用于执行异步操作
actions: {
addAsync(context) {
// 在actions中不能直接修改state中的数据,必须通过context.commit('add')触发某个mutation才行
setTimeout(() => {
context.commit('add')
}, 1000);
},
// 异步接参
addNAsyns(context, step) {
setTimeout(() => {
context.commit('addN', step)
}, 1000);
},
// 触发action第二种方式
subAsync(context) {
setTimeout(() => {
context.commit('sub')
}, 1000);
},
subNAsync(context,step) {
setTimeout(() => {
context.commit('subN',step)
}, 1000);
},
},
modules: {
}
})
组件A,使用第一种触发mutations函数与actions函数的方法
<template>
<div>
<h3>当前最新的count值为:{{ $store.state.count }}</h3>
<h1>{{ $store.getters.showNum }}</h1>
<button @click="btnAdd">+1</button>
<button @click="btnAddN">+N</button>
<button @click="btnAdd3">+1 Async</button>
<button @click="btnAdd4">+N Async</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods:{
btnAdd(){
// 通过commit方法调用store里面mutations里的某个函数
this.$store.commit('add')
},
// 传参
btnAddN(){
this.$store.commit('addN',3)
},
btnAdd3(){
// dispatch函数用于触发某个action
this.$store.dispatch('addAsync')
},
// 异步传参
btnAdd4(){
this.$store.dispatch('addNAsyns',5)
}
}
};
</script>
组件B,使用第二种触发mutations函数与actions函数的方法
<template>
<div>
<h3>当前最新的count值为:{{ count }}</h3>
<h1>{{ showNum }}</h1>
<button @click="btnSub">-1</button>
<button @click="subN(3)">-3</button>
<button @click="subAsync">-1 Asyns</button>
<button @click="subNAsync(5)">-N Async</button>
</div>
</template>
<script>
// 触发mutation函数的第二种方式,从vuex中按需引入
import { mapState, mapMutations,mapActions ,mapGetters} from 'vuex'
export default {
data() {
return {}
},
computed: {
...mapState(['count']),
...mapGetters(['showNum'])
},
methods: {
// 触发mutation函数的第二种方式
...mapMutations(['sub','subN']),
...mapActions(['subAsync','subNAsync']),
btnSub() {
this.sub()
}
},
}
</script>