vuex
Vuex
是一个专为 Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理
应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
- state: 存放公用数据
- mutations:存放store中提供用来改变state中属性的一些函数。
1.通过commit触发;this.$store.commit('mutation中的函数名',传给options的参数)
2.mutations中的函数原则上必须是同步函数 - actions:存放的是一些用来处理异步操作的函数,但是这些函数要修改
state
中的数据必须通过mutations
中的函数。
actions中的函数通过dispatch触发this.$store.dispatch('action函数名',parm)
。 一般用来设置ajax请求。 - getters:存放了一些函数,就是vuex的计算属性
- modules:划分模块,只有大型项目才会使用。如果模块中的
mutations
或actions
中的属性名与根store中的重复,则都会执行。可以通过在模块中添加属性namespaced:true
,注意在触发mutations或actions
中的事件时必须添加相应的模块路径。
modules中只有actions才能拿到rootState和rootGetter. mutations可以借助actions
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {
count:100,
color:'red'
},
mutations: {
addCount(state,options){
state.count+=options;
},
minusCount(state,options){
state.count-=options;
},
changeColor(state,color){
//此时的color是commit传入的对象{type:'changeColor',col:'blue'}
state.color=color;
}
},
actions: {
changeColorAsync(store,options){
setTimeout(()=>{
store.commit('changeColor','green')
},3000)
}
},
modules: {
},
//getters中也存放了一些函数,其实就是vuex的计算属性
getters:{
type(state){
return state.count%2===0?'偶数':"奇数"
}
}
})
export default store
辅助函数:
- mapState
- mapMutations
- mapActions
- mapGetters
//父组件
<template>
<div>
<h1>父组件{{ $store.state.count }}</h1>
<my-a></my-a>
<my-b></my-b>
</div>
</template>
<script>
import a from "./a";
import b from "./b";
export default {
data() {
return {};
},
components: {
"my-a": a,
"my-b": b,
},
};
</script>
<style lang='less'>
</style>
//子组件a
<template>
<div>
<h1>a组件 {{ $store.state.count }}</h1>
<button @click="minus">减少</button>
</div>
</template>
<script>
export default {
name: "my-a",
data() {
return {};
},
methods:{
minus(){
//触发mutation中的changeCount
this.$store.commit('minusCount',10)
}
}
};
</script>
<style lang='less'>
</style>
//子组件b
<template>
<div>
<h1 :style="{ color: $store.state.color }">
b组件{{ mycount }}{{ myCount2 }}
</h1>
<p>{{ type }}</p>
<button @click="add">增加</button>
<button @click="addCount(5)">增加2</button>
<button @click="color">改变颜色</button>
<button @click="changeColorAsync">改变颜色2</button>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex"; //辅助函数
export default {
data() {
return {};
},
methods: {
...mapMutations(["addCount"]),
...mapActions(["changeColorAsync"]),
add() {
this.$store.commit("addCount", 5);
},
color() {
// this.$store.commit({
// type:'changeColor',
// col:'blue'
// })
this.$store.dispatch("changeColorAsync", [1, 22, 3]);
},
},
computed: {
// type() {
// return this.$store.getters.type;
// },
// count() {
// return this.$store.state.count;
// },
// ...mapState(['count']),//只针对组件中要调用的属性名字和store中的属性名字相同时,若不同 则传入对象
...mapState({
mycount: "count",
myCount2: function (state) {
return state.count + 100;
},
}),
...mapGetters(["type"]),
},
};
</script>
<style lang='less'>
</style>