概念
在vue中实现集中式状态(数据)管理的一个 Vue 插件,对Vue应用中多个组件的共享状态进行集中式的管理,也是一种组件间通信的方式,且适用于任意组件间通信。
搭建vuex环境
- 创建文件:src/store/index.js
//引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备action对象--相应组件中用户的动作 const actions = {} //准备mutation对象--修改state中的数据 const mutations = {} //准备state对象--保存具体的数据 const state = {} //创建并暴露store export default new Vuex.Store({ actions, mutations, state })
- 在main.js中创建vm时传入 store 配置项
... //引入store import store from './store' ... //创建vm new Vue({ el:'#app', render:h => h(app), store })
vuex的基本使用
- 初始化数据、配置 actions、配置 mutations,操作文件 store.js
//引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //使用vuex Vue.use(Vuex) const actions = { //响应式组件中加的动作 add(context, value) { context.commit('ADD', value) } } const mutations = { //执行加法 ADD(state, value) { state.sum += value } } //初始化数据 const state = { sum:0 } //创建并暴露store export default new Vuex.Store({ actions, mutations, state })
- 组件中读取vuex中的数据:$store.state.sum
- 组件中修改vuex中的数据:$store.dispatch(‘action中的方法名’, 数据) 或 $store.commit(‘mutations中的方法名’, 数据)
备注:若没有网络请求或其他业务逻辑,组件中也可以直接越过actions,即不写dispatch,直接编写commit
四个map的用法
- mapState方法: 用于帮助我们映射state中的数据为计算属性
computed:{ //借助mapState生成计算属性:sum、school、subject(对象写法) ...mapState({sum:'sum', school:'school', subject:'subject'}), //借助mapState生成计算属性(数组写法) ...mapState(['sum', 'school', 'subject']) }
- mapGetters方法: 用于帮助我们映射 getters 中的数据为计算属性
computed:{ //借助mapGetters生成计算属性:bigSum(对象写法) ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性:bigSum(数组写法) ...mapGetters(['bigSum']) }
- mapAction方法: 用于帮助我们生成与 actions 对话的方法,即:包含 $store.dispatch(xxx)的函数
method:{ //靠mapActions生成:incrementOdd, incrementWait(对象形势) ...mapActions({incrementOdd:'addOdd', incrementWait:'addWait'}), //靠mapActions生成:incrementOdd, incrementWait(对象形势) ...mapActions(['addOdd', 'incrementWait']) }
- mapMutations方法: 用于帮助我们生成与 mutations 对话的方法,即:包含 $store.commit(xxx) 的函数
methods:{ //靠mapActions生成:increment、decrement(对象形势) ...mapMutations({increment:'ADD', decrement:'Del'}), //靠mapActions生成:ADD、Del(对象形势) ...mapMutations(['ADD','Del']), }
备注:mapActions与mapMutations使用时,若需要传递参数,在模板绑定事件时传递好参数,否则参数是事件对象
模块化+命名空间
- 目的:让带吗更好维护,让多种数据分类更加明确
- 修改 store.js
const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations:{...}, actions:{...}, getters:{ bigSum(state) { return state.sum * 10 } } } const personAbout = { namespaced:true,//开启命名空间 state:{...}, mutations:{...}, actions:{...} } const store = new Vuex.Store({ modules: { countAbout, personAbout } })
- 开启命名空间后,组件中读取 state 数据:
//方式1:自己直接读取 this.$store.state.personAbout.list //方式2:借助mapState读取 ...mapState('countAbout', ['sum', 'school', 'subject'])
- 开启命名空间后,组件中读取getters数据:
//方式1:自己直接读取 this.$store.getters['personAbout/firstPersonName'] //方式2:借助mapGetters读取 ...mapGetters('countAbout', ['bigSum'])
- 开启命名空间后,组件中调用 dispatch
//方式1:自己直接调用dispatch this.$store.dispatch('personAbout/addPersonWang', person) //方式2:借助mapAction ...mapAction('countAbout', {incrementOdd:'addOdd', incrementWait:'addWait'})
- 开启命名空间后,组件中调用commit
//方式1:自己直接commit this.$store.commit('personAbout/Add_PERSON', person) //方式2:借助mapMutations ...mapMutations('countAbout', {increment:'ADD', decrement:'DEL'})