基本使用
-
初始化数据、配置actions、mutations,操作文件/store/index.js
//index.js文件用于创建Vuex中最为核心的store对象 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //actions对象用于响应组件中的动作,专门负责业务逻辑 const actions = {//函数声明完整写法,actions中的方法天生能够获取2类参数://其中context对象为上下文对象,用于调用commit方法,value为组件传递过来的参数'add':function (context,value){//为了区分actions和mutations中对应的方法,一般将mutations中的方法名设置为大写context.commit('ADD',value);},//函数声明简写形式decrement(context,value){context.commit('DECREMENT',value);}, } //mutations对象用于操作数据state,该对象中的方法天生能够获取2类参数 //其中state为state对象,用来存放Vuex中的数据,value为组件(或actions方法)传递过来的参数 const mutations = {'ADD':function (state,value){//console.log('mutations中的ADD方法被调用了',state,value);state.sum+=value;},DECREMENT(state,value){state.sum-=value} } //用于存储数据 const state = {sum:0, }} /*创建 并导出Store * (这里的options参数本质上要传入一个键值对对象,但如果键值对的k和v同名,则可以采用简写形式)必须先use Vuex,再创建Store * */ export default new Vuex.Store({actions,mutations,state, })
-
组件中读取Vuex中的数据:
$store.state.数据名
-
组件中修改Vuex中的数据
$store.dispatch('action中的方法名',数据)
或者$store.commit('mutations中的方法名',数据)
[备注]:actions对象中的方法一般涉及到业务逻辑的判断或者网络请求,而mutations中的方法一般直接操作数据,如果组件调用的方法不涉及网络请求或者业务逻辑判断(即方法比较简单无脑),则可越过actions,直接调用mutations中的方法(调用commit方法)