©2020-2024 ioDraw All rights reserved
首先win+r，cmd，npm create
ABC创建一个项目，在components中创建两个vue文件，一个用来写普通的vue求和案例，另一个用vuex来写
vue求和
App.vue
<template> <div> <vueCount></vueCount> <hr /> <Student></Student> </div>
</template> <script> import vueCount from './components/vueCount.vue' import
Student from './components/Student.vue' export default { name: 'App',
components: { vueCount, Student } } </script>
vueCount.vue
v-model.number将n以数字形式返回，不加.number则会变成字符串
<template> <div> <h1>当前求和为:{{sum}}</h1> <select v-model.number="n"> <option
value="1">1</option> <option value="2">2</option> <option value="3">3</option>
</select> <button @click="increment">+</button> <button
@click="decrement">-</button> <button @click="odd">当前为奇数则++</button> <button
@click="waitting">等500毫秒再加</button> </div> </template> <script> export default
{ name:'vueCount', data(){ return{ // 当前数的总和 sum:0, // 用户选择的数字 n:1 } },
methods:{ increment(){ this.sum += this.n }, decrement(){ this.sum -= this.n },
odd(){ if(this.sum%2){ this.sum += this.n } }, waitting(){ setTimeout(()=>{
this.sum += this.n },500) } } } </script> <style type="text/css"> button{
margin-left: 10px; } </style>
以上就是vue版本的求和案例
vuex求和：
首先先安装vuex插件，npm i vuex安装，然后在src中创建一个文件夹store，在store里在创建一个index.js文件
在index.js中创建store实例，并写好配置项
index.js
// 改文件用于创建vuex最核心的store import Vue from 'vue' // 引入vuex插件 import Vuex from
'vuex' // 使用插件 Vue.use(Vuex) // 准备actions --用于响应组件中的动作 const actions = {
add(context,value){ context.commit('ADD',value) }, reduce(context,value){
context.commit('REDUCE',value) }, odd(context,value){ if(context.state.sum %
2){ context.commit('ADD',value) } }, waitting(context,value){ setTimeout(() =>
{ context.commit('ADD',value) }, 500) } } // 准备mutations --用于操作数据（state） const
mutations = { ADD(state,value){ state.sum += value }, REDUCE(state,value){
state.sum -= value } } // 准备state --用于存储数据 const state = { sum:0,
school:'怪物学院', subject:'属性魔法' } // 准备getters --用于对state里的数据加工 const getters = {
bigSum(state){ return state.sum*10 } } // 创建store const store = new
Vuex.Store({ actions, mutations, state, getters }) // 导出store export default
store
Student.vue
在script标签下使用import导入vuex里的特殊方法
<template> <div> <h1>当前求和为:{{sum}}</h1> <h1>当前求和放大十倍为:{{bigSum}}</h1> <h2>我在{
{school}},学习{{subject}}</h2> <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="odd(n)">当前为奇数则++</button>
<button @click="waitting(n)">等500毫秒再加</button> </div> </template> <script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export
default { name: 'Student', data() { return { // 用户选择的数字 n: 1 } }, computed: {
// ...解构展开，借助mapState生成计算属性，从state中读取数据（对象写法） //
...mapState({sum:'sum',school:'school',subject:'subject'}), //
...解构展开，借助mapState生成计算属性，从state中读取数据（数组写法） ...mapState(['sum', 'school',
'subject']), ...mapGetters(['bigSum']) }, methods: { //
借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
...mapMutations({increment:'ADD',decrement:'REDUCE'}), //
借助mapActions生成对应的方法，方法中会调用dispatch去联系actions //
...mapActions({odd:'odd',waitting:'waitting'})
...mapActions(['odd','waitting']) } } </script> <style type="text/css"> button
{ margin-left: 10px; } </style>
使用...mapxxx解构，使其能正常出现在页面上
完成后输入npm run serve 跑起来项目，效果图如下：
具体效果上手尝试便知