Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
如果一个项目频繁使用组件之间的关系,来修改data中的值。一旦项目规模庞大起来,那么管理这些数据会非常棘手。
为此Vue官网为这些频繁需要修改并且监测其变化的数值,提供了一个管理工具就是 Vuex
每一个vuex都是一个store对象,每个对象都有以下5个核心概念
共享数据源
唯一
可以同步
修改共享数据源的数据操作员commit到mutations
计算属性
,当数据需要依赖state中的一个数据或者多个数据计算得来的话,可以定义到这里两种 使用方式
state
直接使用
this.$store.state.state中的数据名
映射使用
import { mapState } from 'vuex' export default { computed: { // 在 template 中配合 指令、插值表达式使用 ...mapState(['state中的属性名']) } }
mutations
直接使用
this.$store.commit('mutaitions的函数名',函数需要的参数)
映射使用
import { mapMutations } from 'vuex' export default { methods: { ...mapMutations(['mutations中的函数名']) // 自定义需要的方法,使用mutations来修改state中的数据 addFn(){ // this.mutations中的函数名 } } }
actions
直接使用
this.$store.dispatch('actions中的函数名',该函数需要的参数)
映射使用
import { mapActions } from 'vuex' export default { methods: { ...mapActions(['actions函数名']) asyncSubFn(){ // this.actions函数名 } } }
getters
直接使用
this.$store.getters.getters的名字
映射使用
import { mapGetters } from 'vuex' export default { computed: { // 在 template 中配合 指令、插值表达式使用 ...mapGetters(['getters的名字']) } }
modules
分模块
const store = new Vuex.Store({ modules: { state(){}, mutations:{}, actions:{}, getters:{}, // ...可以继续在这里分模块 } })
对state取值有影响,对其他暂无影响
无论是直接使用还是映射使用,都需要带上模块名