简介
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。搭建环境
创建主文件,通常为 src/store/index.js
// src/store/index.js // 引入Vue核心库 import Vue from 'vue' // 引入Vuex import Vuex from 'vuex' // 应用Vuex插件 Vue.use(Vuex) // 准备actions对象 const actions = {} // 准备mutations对象 const mutations = {} // 准备state对象 const state = {} // 准备getters对象 const getters = {} // 创建并暴露store export default new Vuex.Store({ actions, mutations, state, getters })
// main.js ...... // 引入store import store from './store' ...... // 创建vm new Vue({ el:'#app', render: h => h(App), store })
基本使用
首先介绍 state、getters、actions、mutations 四个对象
state
state中主要用来存储需集中管理的数据
组件中读取 Vuex 中的数据可以采用如下方式(不要直接修改 Vuex 中的数据,修改使用 action 或 mutations )
this.$store.state.XXX
getters
当state中数据需要加工时,可使用getters加工后再使用
例如:
// 获取10倍的数据
const getters = {
// bigSum(state){ return state.sum*10 } }
使用:
this.$store.getters.bigSum
getters有一个默认参数 state,可直接获取state中的数据
正常情况下getters无需传参,但若想传参,可以采用一个小技巧,即返回一个函数,如下所示:
// 获取n倍的数据 const getters = { bigSum(state) => (n) => state.sum * n }
使用
this.$store.getters.bigSum(10)
mutations
用于操作数据(state) mutations 中的方法通常有两个参数,一个是 state,一个是传入的 valueconst mutations = { JIA(state, value){ // 执行操作的逻辑写在mutations中 state.sum += value }, JIAN(state, value){ state.sum -= value } }
使用:
通过 commit() 执行方法,需传入两个参数,一个是 mutations 中定义的方法名(字符串),一个是需要传入的数据
methods: { add(){ // 没有判断数据的逻辑,所以可以直接commit操作mutations this.$store.commit("JIA", this.n) }, jian(){ this.$store.commit("JIAN", this.n) }, }
actions
actions 通常用于响应组件中的动作,比如在提交 mutations 前,用于执行一些判断逻辑等
如下所示,actions 的方法中通常包含两个参数
(1) context,可以使用其 context.commit() 方法提交 mutations ,或使用 context.state 直接操作数据
(2) value,待传入的数据
const actions = { jishujia(context, value){ // context上下文中也可获取到state数据 // 用于判断数据的逻辑写在actions中 if(context.state.sum % 2){ context.commit("JIA", value) } }, jiawait(context, value){ setTimeout(() => { context.commit("JIA", value) }, 1000); } }
使用:
通过 dispatch 执行actions中的方法,需传入两个参数,方法名和数据
methods: { jishujia(){ // 要通过actions层就要dispatch this.$store.dispatch("jishujia", this.n) }, waitAdd(){ this.$store.dispatch("jiawait", this.n) } }
小结
从上述介绍中我们可以总结出使用规律:
(1)当需直接获取数据时,可使用 this.$store.state.XXX 获取数据
(2)当需直接获取加工后的数据时,可定义 getters 并通过 this.$store.getters.XXX 获取加工后的数据
(3)当有网络请求或其他业务逻辑,可使用 dispatch => actions提交动作 => mutations操作数据
(4)当无需判断或简单逻辑时,可直接使用 commit =>mutations操作数据
四个map方法的使用
每次使用时都需要 this.$store,太麻烦,Vue提供了一种映射方法可直接在组件内部操作Vuex,即为 mapState、mapGetters、mapActions 和 mapMutations。
标签:getters,mutations,actions,state,value,Vuex,store From: https://www.cnblogs.com/xt112233/p/17001822.html