文章目录
一、什么是vuex?
我们先来看看对Vuex比较专业的介绍:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简而言之,Vuex就是全局状态管理工具
二、为什么要用vuex?
Vuex状态管理跟使用传统全局变量的不同之处:
1. Vuex的状态存储是响应式的:就是当你的组件使用到了这个Vuex的状态,一旦它改变了,所有关联的组件都会自动更新相对应的数据,这样开发者省事很多。
2.不能直接修改Vuex的状态:如果是个全局对象变量,要修改很容易,但是在Vuex中不能这样做,想修改就得使用Vuex提供的唯一途径:显示地提交(commint)mutations来实现修改(没了解过这里没关系,下一节前端君会有介绍)。这样做的好处就是方便我们跟踪每一个状态的变化,在开发过程中调试的时候,非常实用。
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
三、使用步骤
1.安装
代码如下(示例):
npm install vuex --save
2.使用vuex
代码如下(示例):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3.创建store
要使用Vuex,我们要创建一个实例 store,我们称之为仓库,利用这个仓库 store 来对我们的状态进行管理。
//创建一个 store
const store = new Vuex.Store({});
四、vuex五大核心
1.State
假设我们有一个全局状态count的值为5。那么,我们就可以将其定义为 state 对象中的key和value,作为全局状态供我们使用。如下:
//创建一个 store
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数:5
}
});
2.Getters
可以认为,getters 是store的计算属性,类似于computed,对state里的数据进行一些过滤,改造等等
假设我们要在state.count的基础上派生出一个新的状态newCount出来,就适合使用我们的 getters,getters 接受 state 作为其第一个参数
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数:5
},
getters:{
newCount:state => state.count * 3
}
});
3.Mutations
Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation ,且必须是同步函数
我们在 mutations中定义了一个叫increment的函数,函数体就是我们要进行更改的地方
会接受 state作为第一个参数,第二个是自定义传参
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数:5
},
mutations:{
increment(state,value){
state.count += value;
}
}
});
我们在提交commit时候,字符串参数increment,就是对应在 mutations中的increment。
一般通过方法或钩子触发,例如:
methods: {
getVal(event) {
//获取当前的按键的值
let value = event.target.dataset.value;
//通过commit提交一个名为increment的mutation
this.$store.commit("increment", value);
}
}
在组件中获取{{count}}方式:
export default {
computed: {
count(){
return this.$store.state.count;
}
}
};
4. Action
用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下:
export default new Vuex.Store({
//存放数据
state: {
obj: {},
},
//4.通过commit mutations中的方法来处理
mutations: {
getParam (state,Object) {
//5.修改state中的数据
state.obj= Object
}
},
//2.接受dispatch传递过来的方法和参数
actions: {
getParamSync (context,Object) {
//处理异步操作
setTimeout(()=>{
//3.通过commit提交一个名为getParam的mutation
//action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation
context.commit('getParam',Object)
},3000)
}
}
})
组件中调用
methods: {
getVal() {
let name= 'xia';
let age= '26';
let sex= 'man';
//1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
this.$store.dispatch('getParamSync',{name,age,sex})
}
}
5. Modules
随着项目的复杂度增大,为了方便管理vuex,一般会将其按功能分割成不同的模块(Module),方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'
import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B
Vue.use(Vuex)
export default new Vuex.Store({
actions,
getters,
state,
mutations,
modules: {
moduleA,
moduleB
}
})
moduleA.js / moduleB.js 文件
// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
state: {
text: 'moduleA'
},
getters: {},
mutations: {},
actions: {}
}
组件中调用
<template>
<div class="demo">
<h1>{{getText1}}</h1>
<h1>{{getText2}}</h1>
</div>
</template>
computed: {
getText1(){
return this.$store.state.moduleA.text;
},
//或
...mapState({
getText2: state => state.moduleB.text;
})
}
五、vuex辅助函数
1.什么是辅助函数?
通过辅助函数mapState、mapActions、mapMutations,把vuex.store中的属性映射到vue实例身上,这样在vue实例中就能访问vuex.store中的属性了,对于操作vuex.store就很方便了。
state辅助函数为mapState,actions辅助函数为mapActions,mutations辅助函数为mapMutations。(Vuex实例身上有mapState、mapActions、mapMutations属性,属性值都是函数)
2. 如何使用
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
computed: {
...mapGetters({
"": "vuex仓库定义的方法",
}),
...mapState({}),
},
methods: {
...mapMutations({}),
...mapActions({}),
},
};
</script>
六、vuex运行机制
View components -> actions(dispatch方式) -> mutations(commit方式) -> state -> View components
//而 getters则可以理解为computed,作为state的计算属性
七、 注意
1. 数据流都是单向的
2. 组件能够调用action
3. action用来派发mutation
4. 只有mutation可以改变状态
5. store是响应式的,无论state什么时候更新,组件都将同步更新