一、 普通求和案例【不使用vuex】
1-1 展示
1-2 代码
1-2-1 目录结构
1-2-2 App.vue
< template>
< div id = " app" >
< img alt = " Vue logo" src = " ./assets/logo.png" />
< Count> </ Count>
</ div>
</ template>
< script>
import Count from "./components/Count.vue" ;
export default {
name : "App" ,
components : {
Count,
} ,
} ;
</ script>
1-2-3 Count.vue
< template>
< div>
< h1> 当前求和为:{{ sum }}</ h1>
< select name = " " id = " " 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" > 当前求和为奇数再加</ button>
< button @click = " incrementWait" > 等一等再+</ button>
</ div>
</ template>
< script>
export 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 !== 0 ) {
this . sum += this . n;
}
} ,
incrementWait ( ) {
setTimeout ( ( ) => {
this . sum += this . n;
} ) ;
} ,
} ,
} ;
</ script>
< style>
</ style>
二、 Vuex改写求和案例
2-1 目录结构
2-2 结果展示
2-3 代码
2-3-1 App.vue
< template>
< div id = " app" >
< img alt = " Vue logo" src = " ./assets/logo.png" />
< Count> </ Count>
</ div>
</ template>
< script>
import Count from "./components/Count.vue" ;
export default {
name : "App" ,
components : {
Count,
} ,
mounted ( ) {
console. log ( "App" , this ) ;
} ,
} ;
</ script>
< style lang = " less" >
#app {
font-family : Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
text-align : center;
color : #2c3e50;
margin-top : 60px;
}
</ style>
2-3-2 main.js
import Vue from 'vue'
import App from './App.vue'
// 引入store
import store from './store/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')
2-3-3 conponent下的Count.vue
< template>
< div>
< h1> 当前求和为:{{ sum }}</ h1>
< select name = " " id = " " 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 = " incrementWait(n)" > 等一等再+</ button>
</ div>
</ template>
< script>
import { mapActions } from "vuex" ;
import { mapState, mapMutations } from "vuex" ;
export default {
name : "Count" ,
data ( ) {
return {
n : 1 ,
} ;
} ,
computed : {
... mapState ( [ "sum" ] ) ,
} ,
methods : {
... mapMutations ( { increment : "JIA" , decrement : "JIAN" } ) ,
... mapActions ( { incrementOdd : "jiaOdd" , incrementWait : "jiaWait" } ) ,
} ,
} ;
</ script>
< style>
</ style>
2-3-4 store下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue. use ( Vuex)
const actions = {
jiaOdd ( context, value ) {
if ( context. state. sum % 2 !== 0 ) {
context. commit ( 'JIA' , value)
}
} ,
jiaWait ( context, value ) {
setTimeout ( ( ) => {
context. commit ( 'JIA' , value)
} , 500 )
}
}
const mutations = {
JIA ( state, value ) {
state. sum += value;
} ,
JIAN ( state, value ) {
state. sum -= value;
} ,
}
const state = {
sum : 0 ,
}
const getters = { }
const store = new Vuex. Store ( {
actions : actions,
mutations,
state,
getters
} )
export default store