vuex五大核心,及理解
vuex是专门为vue.js开发的状态管理工具,它可以储存所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
vuex中有五大状态:
vuex的核心以使用:
1.state:存放状态
存放公共数据,是一个仓库,任何组件都可以调用里面的数据。
使用:在state中直接声明数据即可。
2. getters:vuex中的计算属性
相当于组件中的计算属性,当state中的数据发生改变,getters中的数据也回跟着改变
使用:在vuex中跟state同级,用发跟vux中像似。
3.mutations
是调用state中数据的 ,可以对state中的数据进行添加和修改。
使用方法是在this.$store.commit()
4.Actions 异步
在仓库store中定义需求调用mutations方法,在对应组件中定义触发更改状态的模板和方法
注意:mutations必须是同步函数,actions可以为异步函数。
5.modules 模板
在仓库中定义不同的模板以及modules方法,
在对应的组件获取并显示在页面上
一般在做大型项目的时候,用来管理的
配置保存
vue中操作 vuex中有两个简便方式
import { mapState, mapMutations } from “vuex”;
mapState在computed中利用扩展符使用 …mapState({ user: “user” }),
可用数组方式和对象方式
数组方式:
…mapState([])用来接收vuex中的数据。使用逗号隔开
对象方式:
…mapState({})使用的是 …mapState({ user: “user” }),