Vuex 是什么?
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
-
每一个 Vuex 应用的核心就是 store(仓库)。
“store”基本上就是一个容器。
它包含着你的应用中大部分的状态 (state)。
Mutations 存放的是改变state的方法
Actions 存放的是一些业务逻辑,通常为异步任务 -
Vuex 和单纯的全局对象有以下两点不同:
(1) Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
(2) 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
安装
- NPM
npm install vuex --save
- Yarn
yarn add vuex
使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Store
- 安装 Vuex 之后,让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation:
// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
// vuex 中改变状态的方法
mutations: {
fn2(state){ state.count++; }
}
})
- 使用
<template>
<div @click="fn">{{count}}</div>
</template>
<script>
export default {
data () { return { } },
computed: {
count(){
// 把vuex中的状态赋给count
return this.$store.state.count
}
},
methods: {
fn(){
// 调用vuex中改变状态的方法
// 用commit调用vuex中mutations中的方法
this.$store.commit('fn2');
}
}
}
</script>
State单一状态树
每个应用只能包含一个 store 实例
在 vue 组件中获得 vuex 状态?
由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:
computed: {
count(){
// 把vuex中的状态赋给count
return this.$store.state.count
}
}
mapState 辅助函数,快速接收 Vuex 中的 State。
import { mapState } from 'vuex'
export default {
data () { return { localCount:2 } },
computed: mapState({
count (state) {
return state.count + this.localCount
}
}),
methods: {
fn(){ this.$store.commit('fn2'); }
}
}
Getter
getter(可以认为是 store 的计算属性)。
就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
- Vuex
state: { count: 0 },
getters: { //可以认为是 store 的计算属性
double(state){ return state.count*2;}
},
mutations: {
fn2(state){ state.count++; }
}
- 组件
export default {
computed: {
count(){
//return this.$store.state.count;
return this.$store.getters.double;
}
},
methods: {
fn(){
this.$store.commit('fn2');
}
}
}
<div @click="fn">{{count}}</div>
mapGetters 辅助函数,作用是简化代码的书写。
export default {
computed: {
...mapGetters(["double"])
},
methods: {
fn(){
this.$store.commit('fn2');
}
}
}
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
- Vuex
const store = new Vuex.Store({
state: { count: 1 },
mutations: {
// 定义事件,这个事件的作用是更新count的状态
fn2(state){ state.count++; }
}
})
- 组件
export default {
computed: {
msg(){ return this.$store.state.count; }
},
methods: {
fn(){
// 调用 vuex 中的事件
this.$store.commit('fn2');
}
}
}
<div @click="fn">{{msg}}</div>
- 提交载荷(Payload):就是执行 store.commit 时,传入额外的参数。
mapMutations 辅助函数
- Vuex
const store = new Vuex.Store({
state: { count: 1 },
mutations: {
fn2(state, payload){
state.count *= payload.n;
}
}
})
- 组件
export default {
computed: {
msg(){
return this.$store.state.count;
}
},
methods: {
...mapMutations({
fn: 'fn2'
})
}
}
<div @click="fn({n:2})">{{msg}}</div>
Action 提交的是 mutation,而不是直接变更状态。
- Vuex
const store = new Vuex.Store({
state: {count: 1},
mutations: {
fn2(state, payload){state.count *= payload.n;}
},
actions: {
fn3(context, payload){context.commit('fn2', payload)}
}
})
- 组件
export default {
computed: {
msg(){return this.$store.state.count;}
},
methods: {
fn(){this.$store.dispatch('fn3', {n:3})}
}
}
<div @click="fn">{{msg}}</div>
1. Vuex 梳理
2. Vuex 详细
Vuex 的更多相关知识点,见官网 https://vuex.vuejs.org/zh/guide/.