Vuex 是什么
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
状态管理包含三个部分
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
安装
npm install vuex --save
yarn add vuex
举个例子
- 首先创建一个store(状态仓库)
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state: { // 状态
count: 0
},
mutations: { // 更改状态
increment (state) {
state.count++
}
}
})
new Vue({
store, // 为了能在vue的this.$store中获取到对应的方法和数据
render: h => h(App),
}).$mount('#app')
state
- 顾名思义 state就是状态
- 如上个例子 在根组件中注册store,那么其所有子组件都可以通过this.$store访问到;
使用state的方式
直接在需要的地方使用,
以count为例
<template>
<div id="app">
<div>{{$store.state.testState}}</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
在计算属性中使用
export default {
name:"App",
computed:{
count(){
return this.$store.state.count;
}
}
}
mapState辅助函数
顾名思义, 这就是用来映射state的
import { mapState } from "vuex"
export default{
// ...
// 第一种写法
compuped:mapState({
// 箭头函数
count:state=>state.count,
// 字符串, 'count' 等同于state=>state.count
count1:'count'
}),
// 第二种写法
compoted:mapState(['count','state2',...]),
// 第三种写法, 将局部的计算属性包含在一起
computed:{
// 本地的计算属性
localComputed(){......},
// 映射属性
...mapState(["count","state1","state2",...])
}
}
getters
- 如果获取的状态数据在多个地方都需要处理, 比如过滤,排序等等, 那么我们可能是复制, 可能是单独抽离出来一个方法, 但是这些解决办法都不是那么理想,vue的getters解决了这个问题
- getters相当于Vue的computed的计算属性, 在依赖发生该变的时候才重新计算;
- getter允许state作为第一参数
const store = new Vuex.Store({
state:{
testState:0,
theme:"black",
isBack:false
},
getters:{
// 意思就是testState不能小于10
checkTestState:state => {
if(state.testState<10)return 10;
return state.testState;
}
},
})
getters的访问可以通过store.getters来访问
<div>checkTestState: {{$store.getters.checkTestState}}</div>
mapGetter的使用方式和mapState类似
mutations
mutation都是同步事件
- 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
- 不做过多解释 看代码
mutations:{
// mutation接受state作为第一个参数, 同时支持额外参数(payload荷载)
changeTestState:function (state,payload){
if (payload === null)return;
state.testState = payload;
}
},
更改state的唯一方式是commit
methods:{
buttonClick(){
this.$store.commit('changeTestState',this.val);
}
},
mapMutations 使用方法和之前的类似,不过应当放在methods中
actions
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
与mutation的不同
- 提交的都是mutation而不是直接更改state
- 可以随便异步
actions: {
increment (context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
}
触发action
Action 通过 store.dispatch 方法触发:
store.dispatch('increment')
actions 同样支持荷载(payload)
mapActions的使用方式和mapMutations类似
Module — 一般大项目才使用
- 简单来说就是因为项目复杂, 所以状态数臃肿, 所以将多个store分解出来, 最后再组合在一起
- 便于维护
- 官方文档地址