网站keywords,企业发展历程网站,顺德大良营销网站建设,做图片网站 服务器基本使用 初始化数据、配置actions、mutations#xff0c;操作文件/store/index.js //index.js文件用于创建Vuex中最为核心的store对象
import Vue from vue
import Vuex from vuex
Vue.use(Vuex)
//actions对象用于响应组件中的动作,专门负责业务逻辑
const actions {//函数…基本使用 初始化数据、配置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.sumvalue;},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方法
