h5网站开发案例,wordpress 置顶字段,银川网站建设,建设网站专业 vuex可以定义共享数据。
1、主要结构
src/store/index.js 是使用vuex的核心js文件。 定义数据#xff1a;state 修改数据(同步)#xff1a;mutations 修改数据(异步)#xff1a;action调用mutations 下面定义了一个公共数据msg #xff0c;mutations方法setName… vuex可以定义共享数据。
1、主要结构
src/store/index.js 是使用vuex的核心js文件。 定义数据state 修改数据(同步)mutations 修改数据(异步)action调用mutations 下面定义了一个公共数据msg mutations方法setNameaction方法sendAjax 。
import Vue from vue
import Vuex from vuexVue.use(Vuex)export default new Vuex.Store({// 定义共享数据{{$store.state.msg}}展示所以得组件都可以使用state: {msg:这是vuex的公共消息,},getters: {},// 只能由mutations来实现修改必须是同步操作mutations: {// state代表的是上面的state必须同名但是后面的参数是形参名字随意调用this.$store.commit(setName,新的信息);setName(state,newMsg){state.msgnewMsg;}},// action可以调用mutations在action可以执行异步操作Ajax调用this.$store.dispatch(sendAjax);actions: {// 通过传入context来调用mutations方法sendAjax(context){/*** 执行Ajax*/context.commit(setName,异步修改的信息);},},modules: {}
})
2、操作共享数据
{{$store.state.msg}}展示数据msgupdate1()调用mutations的setName方法修改msgupdate2()调用action的sendAjax方法修改msg。
template
divh1{{$store.state.msg}}/h1input typebutton value直接修改共享数据 clickupdate1()/input typebutton value异步修改共享数据 clickupdate2()/
/div
/template
scriptexport default {methods:{update1(){// 第一个参数是mutations定义的函数名第二个是参数this.$store.commit(setName,新的信息);},update2(){// 调用action方法指定调用的函数名this.$store.dispatch(sendAjax);}}}
/script
