<template> <div class="count"> <h2 > 当前求和为 :{{sum}}</h2> <h3 > 当前求和放大十倍为为 :{{bigSum}}</h3> <h3 > 我在:{{address}} 学习:{{subject}}</h3> <h3 > 下方组件的总人数 : {{personList.length}}</h3> <select v-model.number="n"> <option :value="1">1 </option> <option :value="2">2 </option> <option :value="3">3 </option> </select> <button @click="increment(n)">+</button> <button @click="decrement(n)">-</button> <button @click="incrementOdd(n)">当前求和为奇数再加</button> <button @click="incrementWate(n)">等一等再加</button> </div> </template> <script> import {mapState, mapGetters,mapMutations,mapActions} from 'vuex' export default { name:"Count", data() { return { n:1,//用户选择的数字 } }, computed:{ /* 自己写的计算属性 */ /* sum(){ return this.$store.state.sum }, address(){ // console.log(this.$store) return this.$store.state.address }, subject(){ return this.$store.state.subject }, */ /* **************************** */ // 借助mapState生成计算属性,从state中读取数据(对象写法) /* ...mapState({ sum:"sum", address:"address", subject:"subject", }), */ // 借助mapState生成计算属性,从state中读取数据(数组写法) ...mapState(["sum","address","subject","personList"]), /* ******************************************* */ // bigSum(){ // return this.$store.getters.bigSum // }, // 借助mapGetters生成计算属性,从state中读取数据(对象写法) /* ...mapGetters({ bigSum:"bigSum", }), */ // 借助mapGetters生成计算属性,从state中读取数据(数组写法) ...mapGetters(["bigSum"]), }, methods: { /* increment(){ // this.$store.dispatch('jia',this.n) 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(["",""]),需要改成一样的才能用此方法 /* ****************************** */ /* incrementOdd(){ // if (this.Sstore.state.sum%2) { this.$store.dispatch('jiaOdd',this.n) // } }, incrementWate(){ // setTimeout(() => { this.$store.dispatch('jiaWate',this.n) // }, 500); }, */ // 借助mapActions生成对应的方法,方法中调用dispatch去联系action(对象写法) ...mapActions({ incrementOdd:"jiaOdd", incrementWate:"jiaWate", }), // 借助mapActions生成对应的方法,方法中调用dispatch去联系action(数组写法)要改成想对应的名字 // ...mapActions([ // "", // "" // ]) }, mounted() { // console.log(this.$store) }, } </script> <style scoped> button{ margin: 5px; } </style>
<template> <div> <h1>人员列表</h1> <input type="text" placeholder="请输入名字" v-model="name"/> <button @click="add">添加</button> <ul> <li v-for="p in $store.state.personList" :key="p.id">{{p.name}}</li> </ul> </div> </template> <script> import {nanoid} from 'nanoid' export default { name:"Person", mounted() { }, data() { return { name:"" } }, methods: { add(){ const personObj={id:nanoid(),name:this.name} console.log(personObj) this.$store.commit("ADD_PERSON",personObj) this.name="" } }, } </script> <style> </style>
//该文件用于创建vuex中的store //引入vuex import Vue from 'vue' import Vuex from 'vuex' //使用插件 Vue.use(Vuex); //猪备actions--用于响应组件中的动作 const actions={ // jia:function (context,vaule) { // context.commit("JIA", vaule) // }, // jian: function (context, vaule) { // context.commit("JIAN", vaule) // }, jiaOdd: function (context, vaule) { if (context.state.sum%2) { context.commit("JIA", vaule) } }, jiaWate: function (context, vaule) { setTimeout(() => { context.commit("JIA", vaule) }, 500); }, } // 准备mutations--用于操作数据(state) const mutations = { JIA:function (state,value) { state.sum+=value; }, JIAN: function (state, value) { state.sum -= value; }, ADD_PERSON(state, value){ state.personList.unshift(value) } } //准备state--用于存储数据 const state = { sum: 0,//当前的和 address:"beijing", subject:"qianduan", personList:[ {id:"001",name:"xiaobai"} ] } //用于将state中的数据进行加工 const getters={ bigSum(state){ return state.sum*10 } } //创建store const store=new Vuex.Store({ actions: actions, mutations: mutations, state: state, getters: getters }); //导出store export default store
原文地址:http://www.cnblogs.com/xiaobaizitaibai/p/16895766.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性