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方法）

代码007普通

打赏 收藏 海报 链接