Vuex 是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
判断是否要使用 Vuex
如果项目中组件比较多，并且组件之间需要共享状态，那么就需要用到 Vuex。或者说，如果项目没有使用 Vuex 也依然能够完成，那么就不需要使用 Vuex 。
Vuex基本使用流程
安装
npm install vuex
创建store仓库，并在vue中挂载
// src/store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
// “Vuex.Store” 首字母要大写，不要随意更改
state: {
// state 中是需要记录的数据
number: 1
}
})
export default store
// src/main.js
import store from '@/store'
new Vue({
// ...
store
})
在组件中使用state数据
vuex通过computed计算属性监测数据的变化，进而影响到所有组件中数据的状态
计算属性中使用this.$store.state获取
computed: {
number () {
return this.$store.state.number
}
}
借助辅助函数mapState实现
import { mapState } from 'vuex'
computed: {
...mapState([
'number'
])
}
在store中定义mutations，改变state状态
new Vuex.Store({
// ...
mutations: {
plus (state) {
state.number++
}
}
})
在各个组件中可以通过提交mutations改变state数据
栗子：
// src/App.vue
<template>
<div id="a-com">
<h3>state的number: {{ number }}</h3>
<a-com></a-com>
<b-com></b-com>
</div>
</template>
<script>
import { mapState } from 'vuex'
import ACom from '@/components/ACom
import BCom from '@/components/BCom
export default {
name: 'App',
computed: {
...mapState([
'number'
])
},
components: {
ACom,
BCom
}
}
</script>
// src/components/ACom.vue
<template>
<div id="a">
<h3>A组件的number: {{ number }}</h3>
<button @click="plusNumber">+</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
name: 'A',
computed: {
...mapState([
'number'
])
},
methods: {
// 返回需要的mutations函数
...mapMutaions([
'plus'
]),
plusNumber () {
// 1. 直接通过store提交mutations
// 此处plus是mutations中的方法
// this.$store.commit('plus')
// 2. 使用mapMutations辅助函数 this.plus()
}
}
}
</script>
在src/components/BCom.vue中定义相同的结构
当点击A+或者B+的按钮时都会触发数据仓库state中的number变化
通过vuex我们在不同的组件中共享了数据，实现了某个组件改变数据时，其他组件同时响应
Vuex 状态管理流程：view => actions => mutations => state => view
栗子：
const store = new Vuex.Store({
state: { // state 用来保存状态
num: 88
},
getters: { // 可以对 state 中的数据做一些约束
getNum (state) { // 这里传的参数是 state
return state.num > 0 ? state.num : 0
}
},
mutations: { // mutations 可以直接改变 state 中的状态，里面定义改变状态的函数
increase (state) { // 这里传的参数是 state
state.num += 10
},
decrease (state) {
state.num -= 10
}
},
actions: { // actions 中只能对 mutations 进行操作，而不能直接改变 state 中的状态
increaseAction (context) { // 这里传的参数是上下文对象（context）
context.commit('increase') // 使用 context，提交 increase 方法
}, // 这里提交的increase 方法对应 mutations 中的 increase 方法
decreaseAction (context) {
context.commit('decrease')
}
}
})
获取 state 中保存的数据
this.$store.state.xxx // xxx 为 state 中的键值
如上例中：
this.$store.state.num
获取 getters 中保存的数据
this.$store.getters.xxx // xxx 为 getters 中的函数名
如上例中：
this.$store.getters.getNum
触发 mutations 中的函数
this.$store.commit('xxx') // xxx 为函数名
如上例中：
this.$store.commit('increase')
触发 actions 中的函数
this.$store.dispatch('xxx') // xxx 是函数名
如上例中：
this.$store.dispatch('increaseAction')
mutations 和 actions 的区别
函数传递的参数不同
- mutations 中的函数传的是 state；
- actions 中的函数传的是 context；
触发方式不同
- 触发 mutations 中的函数，通过 this.$store.commit('xxx')；
- 触发 actions 中的函数，通过 this.$store.dispatch('xxx')；
mutations 中只能包含同步操作，actions 中可以包含异步操作
mutations
mutations: {
increase (state) {
state.num += 10
},
decrease (state) {
state.num -= 10
}
}
actions
actions: {
increaseAction (context) {
setTimeout(function () { // 异步操作
context.commit('increase')
}, 1000)
},
decreaseAction (context) {
setTimeout(function () {
context.commit('decrease')
}, 1000)
}
}
操作对象不同
- mutations 可以直接操作 state；
- actions 不能直接操作 state，而是操作 mutations。
vuex的应用场景
检测用户是否登录
当在登录组件中处理了登录信息后，存入state仓库中，可在所有的组件中进行用户数据共享，判断是否有权限
非父子组件值传递
其实父子组件中也是可以使用vuex，主要看业务的复杂度
网友评论