vuex

求和案例

vue 版本

main.js
App.vue
Count.vue
main.js
store/index.js
App.vue
Count.vue
main.js
store/index.js
App.vue
Count.vue
main.js
store/index.js
App.vue
Count.vue
MapCount.vue

import Vue from "vue";
import App from './App.vue'

import VueResource from "vue-resource";

Vue.use(VueResource)

new Vue({
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
}).$mount('#app')


<template>
  <div>
    <Count />
  </div>
</template> 

<script>
import Count from "./components/Count.vue";

export default {
  name: "App",
  components: { Count }
};
</script>

<style>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>


<template>
  <div>
    <h4>当前求和为：</h4>
    <select v-model.number="selectNum">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="incrementIfOdd">当前为奇数再加</button>&nbsp;
    <button @click="incrementAsync">异步加</button>&nbsp;
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      count: 0,
      selectNum: 1
    };
  },
  methods: {
    increment() {
        this.count += this.selectNum
    },
    decrement() {
        this.count -= this.selectNum
    },
    incrementIfOdd() {
        if (this.count % 2 !== 0) {
            this.count+= this.selectNum
        }
    },
    incrementAsync() {
        setTimeout(() => {
            this.count+= this.selectNum
        }, 1000);
    },
  },
};
</script>

<style>
</style>


import Vue from "vue";
import App from './App.vue'

import store from './store'

new Vue({
    render: h => h(App),
    store,
}).$mount('#app')


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建store

// 响应组件动作
const actions = {
    increment(context, value) {
        // console.log('in');
        context.commit('INCREMENT', value)
    },
    decrement(context, value) {
        context.commit('DECREMENT', value)
    },
    incrementIfOdd(context, value) { 
        if (value %2 !== 0) {
            context.commit('INCREMENT', value)
        }
    },
    incrementAsync(context, value) {
        setTimeout(() => {
            context.commit('INCREMENT', value)
        }, 500);
    }
}

// 用于操作数据
const mutations = {
    INCREMENT(state, value) {
        // console.log('in mutation');
        state.sum += value
    },
    DECREMENT(state, value) {
        state.sum -= value
    }
}

// 用于存储数据
const state = {
    sum: 0
}

export default new Vuex.Store({
    actions, mutations, state
})


<template>
  <div>
    <Count />
  </div>
</template> 

<script>
import Count from "./components/Count.vue";

export default {
  name: "App",
  components: { Count }
};
</script>

<style>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>


<template>
  <div>
    <h4>当前求和为: </h4>
    <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>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="incrementIfOdd">当前为奇数再加</button>&nbsp;
    <button @click="incrementAsync">异步加</button>&nbsp;
  </div>
</template>

<script>
export default {
  name: "sum",
  data() {
    return {
      n: 1
    };
  },
  methods: {
    increment() {
        // this.$store.commit('increment', this.n)
        this.$store.commit('INCREMENT', this.n)
    },
    decrement() {
        // this.$store.commit('decrement', this.n)
        this.$store.commit('DECREMENT', this.n)
    },
    incrementIfOdd() {
        this.$store.dispatch('incrementIfOdd', this.n)
    },
    incrementAsync() {
        this.$store.dispatch('incrementAsync', this.n)
    },
  },
};
</script>

<style>
</style>


import Vue from "vue";
import App from './App.vue'

import store from './store'

new Vue({
    render: h => h(App),
    store,
}).$mount('#app')


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建store

// 响应组件动作
const actions = {
    increment(context, value) {
        // console.log('in');
        context.commit('INCREMENT', value)
    },
    decrement(context, value) {
        context.commit('DECREMENT', value)
    },
    incrementIfOdd(context, value) { 
        if (value %2 !== 0) {
            context.commit('INCREMENT', value)
        }
    },
    incrementAsync(context, value) {
        setTimeout(() => {
            context.commit('INCREMENT', value)
        }, 500);
    }
}

// 用于操作数据
const mutations = {
    INCREMENT(state, value) {
        // console.log('in mutation');
        state.sum += value
    },
    DECREMENT(state, value) {
        state.sum -= value
    }
}

// 用于存储数据
const state = {
    sum: 0
}

// 准备getters 用于对state 数据进行加工
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

export default new Vuex.Store({
    actions, mutations, state, getters
})


<template>
  <div>
    <Count />
  </div>
</template> 

<script>
import Count from "./components/Count.vue";

export default {
  name: "App",
  components: { Count }
};
</script>

<style>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>


<template>
  <div>
    <h4>当前求和为: </h4>
    <h4>当前求和10倍为: </h4>
    <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>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="incrementIfOdd">当前为奇数再加</button>&nbsp;
    <button @click="incrementAsync">异步加</button>&nbsp;
  </div>
</template>

<script>
export default {
  name: "sum",
  data() {
    return {
      n: 1
    };
  },
  methods: {
    increment() {
        // this.$store.commit('increment', this.n)
        this.$store.commit('INCREMENT', this.n)
    },
    decrement() {
        // this.$store.commit('decrement', this.n)
        this.$store.commit('DECREMENT', this.n)
    },
    incrementIfOdd() {
        this.$store.dispatch('incrementIfOdd', this.n)
    },
    incrementAsync() {
        this.$store.dispatch('incrementAsync', this.n)
    },
  },
};
</script>

<style>
</style>


import Vue from "vue";
import App from './App.vue'

import store from './store'

new Vue({
    render: h => h(App),
    store,
}).$mount('#app')


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建store

// 响应组件动作
const actions = {
    increment(context, value) {
        // console.log('in');
        context.commit('INCREMENT', value)
    },
    decrement(context, value) {
        context.commit('DECREMENT', value)
    },
    incrementIfOdd(context, value) { 
        if (value %2 !== 0) {
            context.commit('INCREMENT', value)
        }
    },
    incrementAsync(context, value) {
        setTimeout(() => {
            context.commit('INCREMENT', value)
        }, 500);
    }
}

// 用于操作数据
const mutations = {
    INCREMENT(state, value) {
        // console.log('in mutation');
        state.sum += value
    },
    DECREMENT(state, value) {
        state.sum -= value
    }
}

// 用于存储数据
const state = {
    sum: 0,
    school: '小学',
    addr: 'earth'
}

// 准备getters 用于对state 数据进行加工
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

export default new Vuex.Store({
    actions, mutations, state, getters
})


<template>
  <div>
    <h1>原始形式</h1>
    <Count />
    <hr>
    <h1>map简写形式</h1>
    <MapCount />
  </div>
</template> 

<script>
import Count from "./components/Count.vue";
import MapCount from "./components/MapCount.vue";

export default {
  name: "App",
  components: { Count, MapCount }
};
</script>

<style>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>


<template>
  <div>
    <h4>当前求和为: </h4>
    <h4>当前求和10倍为: </h4>
    <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>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="incrementIfOdd">当前为奇数再加</button>&nbsp;
    <button @click="incrementAsync">异步加</button>&nbsp;
  </div>
</template>

<script>
export default {
  name: "sum",
  data() {
    return {
      n: 1
    };
  },
  methods: {
    increment() {
        // this.$store.commit('increment', this.n)
        this.$store.commit('INCREMENT', this.n)
    },
    decrement() {
        // this.$store.commit('decrement', this.n)
        this.$store.commit('DECREMENT', this.n)
    },
    incrementIfOdd() {
        this.$store.dispatch('incrementIfOdd', this.n)
    },
    incrementAsync() {
        this.$store.dispatch('incrementAsync', this.n)
    },
  },
};
</script>

<style>
</style>


<template>
  <div>
    <h4>当前求和为: {{$store.state.sum}}</h4>
    <h4>当前求和10倍为: {{$store.getters.bigSum}}</h4>
    <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>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="incrementIfOdd">当前为奇数再加</button>&nbsp;
    <button @click="incrementAsync">异步加</button>&nbsp;
  </div>
</template>

<script>
export default {
  name: "sum",
  data() {
    return {
      n: 1
    };
  },
  methods: {
    increment() {
        // this.$store.commit('increment', this.n)
        this.$store.commit('INCREMENT', this.n)
    },
    decrement() {
        // this.$store.commit('decrement', this.n)
        this.$store.commit('DECREMENT', this.n)
    },
    incrementIfOdd() {
        this.$store.dispatch('incrementIfOdd', this.n)
    },
    incrementAsync() {
        this.$store.dispatch('incrementAsync', this.n)
    },
  },
};
</script>

<style>
</style>

vuex 使用 vuexmap 2

  • mapMutations 将 store mutations 数据通过 mapMutations 映射到组件中，可以设置别名来避免冲突， 分为 对象形式 和 数组形式
  • mapActions 将 store actions 数据通过 mapActions 映射到组件中，可以设置别名来避免冲突， 分为 对象形式 和 数组形式

main.js
store/index.js
App.vue
Count.vue
MapCount.vue

import Vue from "vue";
import App from './App.vue'

import store from './store'

new Vue({
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this
    }
}).$mount('#app')


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建store

// 响应组件动作
const actions = {
    increment(context, value) {
        // console.log('in');
        context.commit('INCREMENT', value)
    },
    decrement(context, value) {
        context.commit('DECREMENT', value)
    },
    incrementIfOdd(context, value) { 
        if (value %2 !== 0) {
            context.commit('INCREMENT', value)
        }
    },
    incrementAsync(context, value) {
        setTimeout(() => {
            context.commit('INCREMENT', value)
        }, 500);
    }
}

// 用于操作数据
const mutations = {
    INCREMENT(state, value) {
        // console.log('in mutation');
        state.sum += value
    },
    DECREMENT(state, value) {
        state.sum -= value
    }
}

// 用于存储数据
const state = {
    sum: 0,
    school: '小学',
    addr: 'earth'
}

// 准备getters 用于对state 数据进行加工
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

export default new Vuex.Store({
    actions, mutations, state, getters
})


<template>
  <div>
    <h1>原始形式</h1>
    <Count />
    <hr>
    <h1>map简写形式</h1>
    <MapCount />
  </div>
</template> 

<script>
import Count from "./components/Count.vue";
import MapCount from "./components/MapCount.vue";

export default {
  name: "App",
  components: { Count, MapCount }
};
</script>

<style>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
</style>


<template>
  <div>
    <h4>当前求和为: {{$store.state.sum}}</h4>
    <h4>当前求和10倍为: {{$store.getters.bigSum}}</h4>
    <h4>学校为: {{$store.state.school}}</h4>
    <h4>在哪里: {{$store.state.addr}}</h4>
    <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>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="incrementIfOdd">当前为奇数再加</button>&nbsp;
    <button @click="incrementAsync">异步加</button>&nbsp;
  </div>
</template>

<script>
export default {
  name: "sum",
  data() {
    return {
      n: 1
    };
  },
  methods: {
    increment() {
        // this.$store.commit('increment', this.n)
        this.$store.commit('INCREMENT', this.n)
    },
    decrement() {
        // this.$store.commit('decrement', this.n)
        this.$store.commit('DECREMENT', this.n)
    },
    incrementIfOdd() {
        this.$store.dispatch('incrementIfOdd', this.n)
    },
    incrementAsync() {
        this.$store.dispatch('incrementAsync', this.n)
    },
  },
};
</script>

<style>
</style>


<template>
  <div>
    <h4>当前求和为: </h4>
    <h4>当前求和10倍为: </h4>
    <h4>学校为: </h4>
    <h4>在哪里: </h4>
    <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>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="incrementIfOdd">当前为奇数再加</button>&nbsp;
    <button @click="incrementAsync">异步加</button>&nbsp;
  </div>
</template>

<script>
export default {
  name: "sum",
  data() {
    return {
      n: 1
    };
  },
  methods: {
    increment() {
        // this.$store.commit('increment', this.n)
        this.$store.commit('INCREMENT', this.n)
    },
    decrement() {
        // this.$store.commit('decrement', this.n)
        this.$store.commit('DECREMENT', this.n)
    },
    incrementIfOdd() {
        this.$store.dispatch('incrementIfOdd', this.n)
    },
    incrementAsync() {
        this.$store.dispatch('incrementAsync', this.n)
    },
  },
};
</script>

<style>
</style>

results matching ""

    No results matching ""