Vuex用来管理多个组件的共享状态。
适用场景:
1.多个视图依赖于同一状态
2.来自不同视图的行为需要变更同一状态
每个Vuex应用的本质是store(仓库),包含应用中大部分的状态。
开始使用:
npm install vuex
import 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
num:1,
},
mutations:{
add(state){
state.num++;
};
},
}
})
1.state
就是定义状态,Vue是单一状态树。便于管理
mapState辅助函数:
当一个组件需要获取多个状态的时候,将这些状态都定义为计算属性会有些重复和冗余,可以使用mapState帮助生成计算属性。
import {mapState} from 'Vuex'
//组件中使用:
computed: mapState([
"count";//映射this.count为state.count
])
computed: mapState({
countA: state => state.count,
countB: 'count',
//为了拿到this,需要用普通函数
countC(state){
return state.count + this.num
},
})
//相当于:
computed:{
count=> this.store.state.count
}
对象展开运算符...
computed: {
...mapState(['count']),
num(){ return 123},
}
2.Getter
可以认为是store 的计算属性,会把值存储起来,当依赖值发生改变才会重新计算。当需要使用state派生出一些状态时,我们可以用Getter做到。
mapGetter辅助函数用来将store的getter映射到局部计算属性。
getters: {
fn: state => {
//对state进行操作
}
}
//在组件中使用
import {mapGetter} from 'vuex'
export default{
computed: {
...mapGetter(["fn"])
}
}
网友评论