镇江 网站建设,怎么在百度发布免费广告,威海公司注册,如何建立一个网站链接的文档第5章#xff1a;vuex 1 求和案例 纯vue版2 vuex工作原理图3 vuex案例3.1 搭建vuex环境错误写法正确写法 3.2 求和案例vuex版细节分析源代码 4 getters配置项4.1 细节4.2 源代码 5 mapState与mapGetters5.1 总结5.2 细节分析5.3 源代码 6 mapActions与mapMutations6.1 总结6.2… 第5章vuex 1 求和案例 纯vue版2 vuex工作原理图3 vuex案例3.1 搭建vuex环境错误写法正确写法 3.2 求和案例vuex版细节分析源代码 4 getters配置项4.1 细节4.2 源代码 5 mapState与mapGetters5.1 总结5.2 细节分析5.3 源代码 6 mapActions与mapMutations6.1 总结6.2 细节6.3 源代码 7 多组件共享数据7.1 细节7.2 源代码 8 vuex模块化 namespace8.1 总结8.2 第一部分细节问题 8.3 第二部分细节问题 8.4 源代码 1 求和案例 纯vue版
这里只需要住一个问题就是Count组件的v-model.number“n”如果没有number这个n就是个字符串。 src/components/Count.vue
templatedivh1当前求和为{{sum}}/h1select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement/buttonbutton clickdecrement-/buttonbutton clickincrementOdd当前求和为奇数再加/buttonbutton clickincrementWait等一等再加/button/div
/templatescriptexport default {name:Count,data() {return {n:1, //用户选择的数字sum:0 //当前的和}},methods: {increment(){this.sum this.n},decrement(){this.sum - this.n},incrementOdd(){if(this.sum % 2){this.sum this.n}},incrementWait(){setTimeout((){this.sum this.n},500)},},}
/scriptstyle langcssbutton{margin-left: 5px;}
/stylesrc/App.vue
templatedivCount//div
/templatescriptimport Count from ./components/Countexport default {name:App,components:{Count},}
/script
src/main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入插件
import vueResource from vue-resource
//关闭Vue的生产提示
Vue.config.productionTip false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:#app,render: h h(App),beforeCreate() {Vue.prototype.$bus this}
})2 vuex工作原理图
以求和案例为例用sum来表示当前的和vuex会交时state保管此时sum为0。
State是一个Object类型对象可以存储很多数据例如todossum等。
接下来过程如下
Count组件调用dispatch它是一个函数要传两个参数一个是进行的动作类型一个是数据即dispatch(‘jia’,2)。Actions也是一个Object类型对象此时Actions对象里面必然有一组key value为jia:function此时函数被调用就收到了2function函数里面就会调用commit(‘jia’,2)。Mutations也是一个Object类型对象此时Mutations对象里面必然有一组key value为jia:functionfunction会拿到两个东西一个是state一个是2随后function里面就写state.sum 2即可然后底层就自动走了Mutate。最终state里面保存的sum的值就变为了2。vuex会重新解析组件再重新渲染页面于是页面的sum也变成了2 Actions设计的目的是为了和后端交互的例如dispatch(‘chu’)有动作类型但没有所对应的值此时就要问后端了后端服务器返回9如下 如果你并不需要和后端交互就可以直接和Mutations交互如下 注意到Devtools即开发者工具是和Mutations进行交互的。
Actions、Mutations和State统一经过一个东西的管理如下 也就是说调用dispatch等方法时是由store提供的如下
3 vuex案例
3.1 搭建vuex环境
2022年2月7日Vue3已经成为了默认版本vuex也同时更新到4版本即执行命令npm i vuex安装的是vuex的4版本而vuex的4版本只能在vue3使用。
Vue2中要用vuex的3版本执行命令npm i vuex3Vue3中要用vuex的4版本
错误写法
首先在src下面创建一个store文件夹如下 index里面代码如下 紧接着在main.js引入store由于文件名称是index.js所以可以直接省略名字脚手架认识如下 此时好像环境搭建完毕但这样会出错如下创建store实例之前就要使用Vue.use(Vuex) 回到main.js代码分析首先得把绿色框文件里得代码执行完了我才能收到store随后才走粉色框代码。
这样就导致了先创建store实例因为绿色框文件即index.js创建了一个store实例。 哪怕换顺序也没用import语句有优先级会优先执行不管顺序。
即首先扫描所有import语句按照import语句代码顺序全部先执行import语句。
正确写法
首先在src下面创建一个store文件夹如下 index里面代码如下 紧接着在main.js引入store由于文件名称是index.js所以可以直接省略名字脚手架认识如下 3.2 求和案例vuex版
细节分析
一般来说共享是由两个及以上的组件才叫共享如下 但在这个案例中仅仅使用了Count组件主要是为了学习vuex的开发流程。
细节一actions actions中函数的第一个参数是context称之为miniStore其内容如下 actions中函数的第二个参数就是所传递的值。 一般commit的时候会大写JIA目的是做个区分一看到大写JIA就知道是mutations里的。
细节一mutations mutations中函数的第一个参数是state并且进行了加工加上了get和set如下 mutations中函数的第二个参数就是所传递的值。
细节三 如下所示绿色框函数要作一些判断它是有存在意义的而红色框函数没有任何存在意义因此删掉 删掉之后直接调用commit即可如下
源代码
src/components/Count.vue
templatedivh1当前求和为{{$store.state.sum}}/h1select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement/buttonbutton clickdecrement-/buttonbutton clickincrementOdd当前求和为奇数再加/buttonbutton clickincrementWait等一等再加/button/div
/templatescriptexport default {name:Count,data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit(JIA,this.n)},decrement(){this.$store.commit(JIAN,this.n)},incrementOdd(){this.$store.dispatch(jiaOdd,this.n)},incrementWait(){this.$store.dispatch(jiaWait,this.n)},},mounted() {console.log(Count,this)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/style
src/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions {/* jia(context,value){console.log(actions中的jia被调用了)context.commit(JIA,value)},jian(context,value){console.log(actions中的jian被调用了)context.commit(JIAN,value)}, */jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}
}
//准备mutations——用于操作数据state
const mutations {JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value}
}
//准备state——用于存储数据
const state {sum:0 //当前的和
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})src/App.vue
templatedivCount//div
/templatescriptimport Count from ./components/Countexport default {name:App,components:{Count},mounted() {// console.log(App,this)},}
/script
src/main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入插件
import vueResource from vue-resource
//引入store
import store from ./store//关闭Vue的生产提示
Vue.config.productionTip false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:#app,render: h h(App),store,beforeCreate() {Vue.prototype.$bus this}
})
4 getters配置项
4.1 细节
当前有一个新需求还要显示当前求和放大十倍后的结果。
最好不要像如下这样写考虑一下假设程序员要对state的sum进行一些加工而且是一些很复杂的数学运算而且很多程序员要使用这样的功能这样就不适合像如下这样写。
使用计算属性也不行它不能跨组件 直接在store的index文件夹进行配置如下
state就如同data而getters就如同computed一样 组件中读取数据:$store.getters.bigSum。直接看代码即可
4.2 源代码
在求和案例vuex版基础上要修改的代码有 src/components/Count.vue
templatedivh1当前求和为{{$store.state.sum}}/h1h3当前求和放大10倍为{{$store.getters.bigSum}}/h3select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement/buttonbutton clickdecrement-/buttonbutton clickincrementOdd当前求和为奇数再加/buttonbutton clickincrementWait等一等再加/button/div
/templatescriptexport default {name:Count,data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit(JIA,this.n)},decrement(){this.$store.commit(JIAN,this.n)},incrementOdd(){this.$store.dispatch(jiaOdd,this.n)},incrementWait(){this.$store.dispatch(jiaWait,this.n)},},mounted() {console.log(Count,this.$store)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/stylesrc/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions {/* jia(context,value){console.log(actions中的jia被调用了)context.commit(JIA,value)},jian(context,value){console.log(actions中的jian被调用了)context.commit(JIAN,value)}, */jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}
}
//准备mutations——用于操作数据state
const mutations {JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value}
}
//准备state——用于存储数据
const state {sum:0 //当前的和
}
//准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})5 mapState与mapGetters
5.1 总结 5.2 细节分析
我们多配置两个数据分别为school和subject如下当使用state的很多数据时候会多次调用store.state.xxx这样很麻烦。 最简单的方式是用计算属性解决但是要程序员一次一次的配置也会很麻烦。 vuex的设计者提供了mapState方法它可以帮我们批量生成粉色框的代码因为它们共同点都是从state读取数据。 首先要引入mapState如下 看看mapState输出是什么 比如要生成state的sum相对应函数如下 我们可以写简写形式即前面的’he’去掉’但sum不行它是一个表达式其余的也同理如下 输出x,可以看到它为我们生成了函数如下 在computed里面配置mapstate 我们会发现像上述这样配置会发生报错这是因为mapState本身是一个对象computed又是对象不可能直接在对象里面写对象。 在对象里面写对象的方法 先看一个例子 直接在对象前面加三个点意思是把obj2里面的每一组key和value展开放入到obj里面 最终输出如下 因此我们要在mapState加三个点如下
还有一种数组写法并且要求同名如下 由于同名可以简写简写的时候必须要’以sum:sum’为例如果简写成sum最终含义就是sum:sum进而去读取sum变量这就报错了。 举个例子只有是变量的时候简写才能直接不要’‘如下 由于a是变量所以简写不需要’’ 所以最终简写形式如下 对于getters同理也有mapGetters一样的用法直接看代码即可。 5.3 源代码
在求和案例vuex版基础上要修改的代码有 src/components/Count.vue
templatedivh1当前求和为{{sum}}/h1h3当前求和放大10倍为{{bigSum}}/h3h3我在{{school}}学习{{subject}}/h3select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement/buttonbutton clickdecrement-/buttonbutton clickincrementOdd当前求和为奇数再加/buttonbutton clickincrementWait等一等再加/button/div
/templatescriptimport {mapState,mapGetters} from vuexexport default {name:Count,data() {return {n:1, //用户选择的数字}},computed:{//靠程序员自己亲自去写计算属性/* sum(){return this.$store.state.sum},school(){return this.$store.state.school},subject(){return this.$store.state.subject}, *///借助mapState生成计算属性从state中读取数据。对象写法// ...mapState({he:sum,xuexiao:school,xueke:subject}),//借助mapState生成计算属性从state中读取数据。数组写法...mapState([sum,school,subject]),/* ******************************************************************** *//* bigSum(){return this.$store.getters.bigSum}, *///借助mapGetters生成计算属性从getters中读取数据。对象写法// ...mapGetters({bigSum:bigSum})//借助mapGetters生成计算属性从getters中读取数据。数组写法...mapGetters([bigSum])},methods: {increment(){this.$store.commit(JIA,this.n)},decrement(){this.$store.commit(JIAN,this.n)},incrementOdd(){this.$store.dispatch(jiaOdd,this.n)},incrementWait(){this.$store.dispatch(jiaWait,this.n)},},mounted() {const x mapState({he:sum,xuexiao:school,xueke:subject})console.log(x)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/style
src/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions {/* jia(context,value){console.log(actions中的jia被调用了)context.commit(JIA,value)},jian(context,value){console.log(actions中的jian被调用了)context.commit(JIAN,value)}, */jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}
}
//准备mutations——用于操作数据state
const mutations {JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value}
}
//准备state——用于存储数据
const state {sum:0, //当前的和school:尚硅谷,subject:前端
}
//准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})6 mapActions与mapMutations
6.1 总结 6.2 细节
我们需要优化的是方法如下 首先使用mapMutations修改如下 但当点击1之后发生如下错误 我们让JIA输出value看看什么情况如下 可以看到这个value是一个事件如下 可以看到mapMutations生成的函数需要传递参数。 可以看到我们调用函数时并没有传递参数所以默认传的参数是event如下 因此在调用函数时要传入参数如下 如果不想在函数里面传参还可以用下面这个方法但我觉得复杂了 我们采取函数传参的方法此时mapMutations还可以使用数组方法并使用简写形式如下 此时调用函数处为 mapActions同理不再过多说明直接看源代码。
6.3 源代码
在求和案例vuex版基础上要修改的代码有 src/components/Count.vue
templatedivh1当前求和为{{sum}}/h1h3当前求和放大10倍为{{bigSum}}/h3h3我在{{school}}学习{{subject}}/h3select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement(n)/buttonbutton clickdecrement(n)-/buttonbutton clickincrementOdd(n)当前求和为奇数再加/buttonbutton clickincrementWait(n)等一等再加/button/div
/templatescriptimport {mapState,mapGetters,mapMutations,mapActions} from vuexexport default {name:Count,data() {return {n:1, //用户选择的数字}},computed:{//借助mapState生成计算属性从state中读取数据。对象写法// ...mapState({he:sum,xuexiao:school,xueke:subject}),//借助mapState生成计算属性从state中读取数据。数组写法...mapState([sum,school,subject]),/* ******************************************************************** *///借助mapGetters生成计算属性从getters中读取数据。对象写法// ...mapGetters({bigSum:bigSum})//借助mapGetters生成计算属性从getters中读取数据。数组写法...mapGetters([bigSum])},methods: {//程序员亲自写方法/* increment(){this.$store.commit(JIA,this.n)},decrement(){this.$store.commit(JIAN,this.n)}, *///借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)...mapMutations({increment:JIA,decrement:JIAN}),//借助mapMutations生成对应的方法方法中会调用commit去联系mutations(数组写法)// ...mapMutations([JIA,JIAN]),/* ************************************************* *///程序员亲自写方法/* incrementOdd(){this.$store.dispatch(jiaOdd,this.n)},incrementWait(){this.$store.dispatch(jiaWait,this.n)}, *///借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:jiaOdd,incrementWait:jiaWait})//借助mapActions生成对应的方法方法中会调用dispatch去联系actions(数组写法)// ...mapActions([jiaOdd,jiaWait])},mounted() {const x mapState({he:sum,xuexiao:school,xueke:subject})console.log(x)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/style
src/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions {/* jia(context,value){console.log(actions中的jia被调用了)context.commit(JIA,value)},jian(context,value){console.log(actions中的jian被调用了)context.commit(JIAN,value)}, */jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}
}
//准备mutations——用于操作数据state
const mutations {JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value}
}
//准备state——用于存储数据
const state {sum:0, //当前的和school:尚硅谷,subject:前端
}
//准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})7 多组件共享数据
7.1 细节
看如下需求sum和persons可以同时共享 细节一 首先是创建Person组件并在App引入。 紧接着在vuex添加person数据如下 紧接着在Person组件引入数据如下
这里有两种写法但我们使用红色框的写法如果我们使用绿色框的写法就避免了一个问题不利于学习因此在Person组件不使用简写方式而在Count组件使用简写方式这样利于学习 细节二 现在看看PersonList是怎么进行共享的先看Count组件借助mapState读取。 而Person组件是利用计算属性读取的如下 sum属性也同理可以去看看。
7.2 源代码
在求和案例vuex版基础上要修改的代码有 src/components/Count.vue
templatedivh1当前求和为{{sum}}/h1h3当前求和放大10倍为{{bigSum}}/h3h3我在{{school}}学习{{subject}}/h3h3 stylecolor:redPerson组件的总人数是{{personList.length}}/h3select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement(n)/buttonbutton clickdecrement(n)-/buttonbutton clickincrementOdd(n)当前求和为奇数再加/buttonbutton clickincrementWait(n)等一等再加/button/div
/templatescriptimport {mapState,mapGetters,mapMutations,mapActions} from vuexexport default {name:Count,data() {return {n:1, //用户选择的数字}},computed:{//借助mapState生成计算属性从state中读取数据。数组写法...mapState([sum,school,subject,personList]),//借助mapGetters生成计算属性从getters中读取数据。数组写法...mapGetters([bigSum])},methods: {//借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)...mapMutations({increment:JIA,decrement:JIAN}),//借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:jiaOdd,incrementWait:jiaWait})},mounted() {// const x mapState({he:sum,xuexiao:school,xueke:subject})// console.log(x)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/style
src/components/Person.vue
templatedivh1人员列表/h1h3 stylecolor:redCount组件求和为{{sum}}/h3input typetext placeholder请输入名字 v-modelnamebutton clickadd添加/buttonulli v-forp in personList :keyp.id{{p.name}}/li/ul/div
/templatescriptimport {nanoid} from nanoidexport default {name:Person,data() {return {name:}},computed:{personList(){return this.$store.state.personList},sum(){return this.$store.state.sum}},methods: {add(){const personObj {id:nanoid(),name:this.name}this.$store.commit(ADD_PERSON,personObj)this.name }},}
/script
src/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)//准备actions——用于响应组件中的动作
const actions {/* jia(context,value){console.log(actions中的jia被调用了)context.commit(JIA,value)},jian(context,value){console.log(actions中的jian被调用了)context.commit(JIAN,value)}, */jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}
}
//准备mutations——用于操作数据state
const mutations {JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value},ADD_PERSON(state,value){console.log(mutations中的ADD_PERSON被调用了)state.personList.unshift(value)}
}
//准备state——用于存储数据
const state {sum:0, //当前的和school:尚硅谷,subject:前端,personList:[{id:001,name:张三}]
}
//准备getters——用于将state中的数据进行加工
const getters {bigSum(state){return state.sum*10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})src/App.vue
templatedivCount/hrPerson//div
/templatescriptimport Count from ./components/Countimport Person from ./components/Personexport default {name:App,components:{Count,Person},mounted() {// console.log(App,this)},}
/script
8 vuex模块化 namespace
8.1 总结 8.2 第一部分
细节问题
细节一 配置store 一开始我们是怎么配置store的如下 但现在有个问题以mutation为例假设是一个电商系统我们已经实现了求和模块、人员模块那还要继续写订单模块商品模块等这样mutation内容就很多了很难维护还有就是所有程序员都操作一个mutation也容易造成git版本控制冲突。 因此分类整理相当于分别管理求和的store和人员的store如下 紧接着使用配置如下 还可以使用简写形式如下
细节二 Count组件读取store 由于是初学者暴露时不使用简写形式便于学习如下 mapstate 第一种读取数据方式如下会发现比较复杂如下 第二种就是利用mapstate的语法先不管personList如下 但这样写会报错因为没使用namespace所以要加上如下当添加上namespace后就可以了。 接下来考虑personList也要加上namespace如下 mapmutation mapaction mapgetters 同理如下
8.3 第二部分
细节问题
细节一 Person组件读取store 之前Person组件不使用简写方式就是因为在这里要学习不使用map方法时如何读取store。
读取state 可以看到用如下的读取方式 commit 不用简写形式调用Mutations时使用commit在这里的语法形式如下 增加一些功能 我们还需要练习getters和dispatch的调用方法因此在actions和getters上添加一些功能。如下 getters 在内容添加firstPersonName如下 因此需要使用计算属性这里的写法很独特。 这里有一个方法就是输出store看看它究竟是什么写法如下 所以应该这样写如下
dispatch 然后调用dispatch和getters类似的写法如下
细节二 store配置管理问题 直接将person和count拆分管理如下 然后在index里面引入就行如下
细节三 发请求 在person中添加actions这个api可以返回一个小语录这个小语录作为名字如下
紧接着在person组件配置如下
8.4 源代码
在求和案例vuex版基础上要修改的代码有 src/components/Count.vue
templatedivh1当前求和为{{sum}}/h1h3当前求和放大10倍为{{bigSum}}/h3h3我在{{school}}学习{{subject}}/h3h3 stylecolor:redPerson组件的总人数是{{personList.length}}/h3select v-model.numbernoption value11/optionoption value22/optionoption value33/option/selectbutton clickincrement(n)/buttonbutton clickdecrement(n)-/buttonbutton clickincrementOdd(n)当前求和为奇数再加/buttonbutton clickincrementWait(n)等一等再加/button/div
/templatescriptimport {mapState,mapGetters,mapMutations,mapActions} from vuexexport default {name:Count,data() {return {n:1, //用户选择的数字}},computed:{//借助mapState生成计算属性从state中读取数据。数组写法...mapState(countAbout,[sum,school,subject]),...mapState(personAbout,[personList]),//借助mapGetters生成计算属性从getters中读取数据。数组写法...mapGetters(countAbout,[bigSum])},methods: {//借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)...mapMutations(countAbout,{increment:JIA,decrement:JIAN}),//借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)...mapActions(countAbout,{incrementOdd:jiaOdd,incrementWait:jiaWait})},mounted() {console.log(this.$store)},}
/scriptstyle langcssbutton{margin-left: 5px;}
/style
src/components/Person.vue
templatedivh1人员列表/h1h3 stylecolor:redCount组件求和为{{sum}}/h3h3列表中第一个人的名字是{{firstPersonName}}/h3input typetext placeholder请输入名字 v-modelnamebutton clickadd添加/buttonbutton clickaddWang添加一个姓王的人/buttonbutton clickaddPersonServer添加一个人名字随机/buttonulli v-forp in personList :keyp.id{{p.name}}/li/ul/div
/templatescriptimport {nanoid} from nanoidexport default {name:Person,data() {return {name:}},computed:{personList(){return this.$store.state.personAbout.personList},sum(){return this.$store.state.countAbout.sum},firstPersonName(){return this.$store.getters[personAbout/firstPersonName]}},methods: {add(){const personObj {id:nanoid(),name:this.name}this.$store.commit(personAbout/ADD_PERSON,personObj)this.name },addWang(){const personObj {id:nanoid(),name:this.name}this.$store.dispatch(personAbout/addPersonWang,personObj)this.name },addPersonServer(){this.$store.dispatch(personAbout/addPersonServer)}},}
/script
src/store/count.js
//求和相关的配置
export default {namespaced:true,actions:{jiaOdd(context,value){console.log(actions中的jiaOdd被调用了)if(context.state.sum % 2){context.commit(JIA,value)}},jiaWait(context,value){console.log(actions中的jiaWait被调用了)setTimeout((){context.commit(JIA,value)},500)}},mutations:{JIA(state,value){console.log(mutations中的JIA被调用了)state.sum value},JIAN(state,value){console.log(mutations中的JIAN被调用了)state.sum - value},},state:{sum:0, //当前的和school:尚硅谷,subject:前端,},getters:{bigSum(state){return state.sum*10}},
}src/store/index.js
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
import countOptions from ./count
import personOptions from ./person
//应用Vuex插件
Vue.use(Vuex)//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
})src/store/person.js
//人员管理相关的配置
import axios from axios
import { nanoid } from nanoid
export default {namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf(王) 0){context.commit(ADD_PERSON,value)}else{alert(添加的人必须姓王)}},addPersonServer(context){axios.get(https://api.uixsj.cn/hitokoto/get?typesocial).then(response {context.commit(ADD_PERSON,{id:nanoid(),name:response.data})},error {alert(error.message)})}},mutations:{ADD_PERSON(state,value){console.log(mutations中的ADD_PERSON被调用了)state.personList.unshift(value)}},state:{personList:[{id:001,name:张三}]},getters:{firstPersonName(state){return state.personList[0].name}},
}src/App.vue
templatedivCount/hrPerson//div
/templatescriptimport Count from ./components/Countimport Person from ./components/Personexport default {name:App,components:{Count,Person},mounted() {// console.log(App,this)},}
/script
