嘉兴房产网站建设,网站后台添加文字,杭州响应式建站价格,阿里云自助建站教程这里主要是将store里面的index.js这个文件变得更加有条理性一点#xff0c;使得整个代码看起来比较清晰
主要的变动在于count.vue,person.vue,index.js
count.vue
templatedivh1当前求和为#xff1a;{{sum}}/h1h3当前求和放大10…这里主要是将store里面的index.js这个文件变得更加有条理性一点使得整个代码看起来比较清晰
主要的变动在于count.vue,person.vue,index.js
count.vue
templatedivh1当前求和为{{sum}}/h1h3当前求和放大10倍为:{{bigSum}}/h3h3我在{{school}} 学习{{subject}}/h3h3 stylecolor:red下方组件的总人数是{{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 {mapActions, mapGetters, mapMutations, mapState} from vuexexport default {name:Count,data() {return {n:1, //用户选择的数字}},computed:{...mapState(countAbout,[sum,school,subject]),...mapState(personAbout,[personList]),...mapGetters(countAbout,[bigSum])},methods: {//借助mapMutations生成对应的方法方法中会调用commit去联系mutaions...mapMutations(countAbout,{increment:JIA,decrement:JIAN}),// incrementOdd(){// this.$store.dispatch(jiaOdd,this.n)// },// incrementWait(){// this.$store.dispatch(jiaWait,this.n) // },//...mapActions(countAbout,{incrementOdd:jiaOdd,incrementWait:jiaWait})},mounted(){const x mapState({he:sum,xuexiao:school,xueke:subject})console.log(x)}}
/scriptstylebutton{margin-left: 5px;}
/style
person.vue
templatedivh1人员列表/h1h3 stylecolor:blue上方组件的求和为{{sum}}/h3input typetext placeholder请输入名字 v-modelnamebutton clickadd添加/buttonulli v-forp in personList :keyp.id{{p.name}}/li/ul/div
/templatescript
import { nanoid } from nanoidexport default {name:Person,data(){return{name:}},computed:{personList(){return this.$store.state.personAbout.personList},sum(){return this.$store.state.countAbout.sum}},methods:{add(){const personObj{id:nanoid(),name:this.name}this.$store.commit(personAbout/ADD_PERSON,personObj)this.name}}
}
/script
index.js
//该文件用于创建VUex中最为核心的storeimport Vue from vue//引入Vuex
import Vuex from vuex
//应用vuex插件
Vue.use(Vuex)//求和相关配置
const countOptions {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}}
}//人员管理相关配置
const personOptions {namespaced:true,actions:{},mutations:{ADD_PERSON(state,value){console.log(mutations中的ADD_PERSON被调用勒)state.personList.unshift(value)}},state:{personList:[{id:001,name:张三}]},getters:{}
}//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions}
})
