Javascript

Vuex练习

本文主要是介绍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练习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!