Vue学习笔记-Vuex基本使用

基本使用

1. 初始化数据、配置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,
   })

2. 组件中读取Vuex中的数据:$store.state.数据名

3. 组件中修改Vuex中的数据$store.dispatch('action中的方法名',数据)或者$store.commit('mutations中的方法名',数据)

[备注]：actions对象中的方法一般涉及到业务逻辑的判断或者网络请求，而mutations中的方法一般直接操作数据，如果组件调用的方法不涉及网络请求或者业务逻辑判断（即方法比较简单无脑），则可越过actions，直接调用mutations中的方法（调用commit方法）