本文主要是介绍Vuex练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vuex

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

Vue.use(Vuex)

export default new Vuex.Store({
    // state相当于组件中的date啊，专门用来存放全局的数据
    state: { num: 0 },
    // 相当于vue里面的计算属性computed getters是全局的 computed是组件内的
    getters: {
        getNum(state) {
            return state.num
        }
    },
    // mutations 相当于组件中的methods，但它不能使用异步的方法（定时器、axios）
    mutations: {
        //让num 累加
        //payload 是一个一个形参，如果组件在commit时，有传这个参数过来，就存在
        // 如果没有传递过来，就是undefined
        increase(state, payload) {
            state.num += payload ? payload : 1;
        },
        // 让num 累减
        decrease(state) {
            state.num--;
        }
    },
    // actions专门用来处理异步，实际修改状态值的，依然是mutations
    actions: {
        // 点击‘减一’按钮后，放慢一秒后再去执行减法
        decreaseAsync(context) {
            context.commit('decrease')
        }
    },
    // 主模块，里面可以分很多子模块，每个子模块都有上面的属性，最后汇总在这里
    modules: {}
})

<template>
  <div id="app">
    <home></home>
    <about></about>
    <btn></btn>
  </div>
</template>

<script>
import Home from "@/views/Home";
import About from "@/views/About";
import Btn from "@/views/Btn";

export default {
  components: {
    Home,
    About,
    Btn,
  },
};
</script>
<style lang="less">
</style>

<template>
  <div>
    <button @click="$store.commit('increase', 2)">点击加1：</button>
    <button @click="$store.dispatch('decreaseAsync')">点击延迟减1：</button>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>
<style>
</style>

<template>
  <div class="home">
    <h2>Home组件的数字:{{ $store.getters.getNum }}</h2>
  </div>
</template>

<script>
export default {};
</script>

<template>
  <div class="about">
    <h2>About组件的数字:{{ $store.getters.getNum }}</h2>
  </div>
</template>
<script>
export default {
  computed: {},
};
</script>

这篇关于Vuex练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！