zoukankan      html  css  js  c++  java
  • vuex如何管理需要即时更新的全局变量

    自己在使用vue练习开发的时候遇到全局变量无法即时更新的问题,查了资料之后得出结论使用vuex能够快速解决该问题,但是看了好多人讲解vuex的教程自己跟着去做都没解决自己想要的,最后找到一个比较容易理解的拿出来分享给大家,也顺便给自己做笔记了。

    1.首先安装vuex  cnpm install vue --save

    2.引入vuex  import Vuex from 'vuex';

    3.只需要复制粘贴过去即可(最重要的别忘了需要初始化的时候把store写进去

    new Vue({
    el: '#app',
    router,
    store,//使用store
    components: { App },
    template: '<App/>'
    })

    //创建Store实例
    const store = new Vuex.Store({
    // 存储状态值
    state: {
    count: 1,
    flag:true
    },
    // 状态值的改变方法,操作状态值
    // 提交mutations是更改Vuex状态的唯一方法
    mutations: {
    increment (state) {
    state.flag = !state.flag;
    // 变更状态
    state.count++
    }
    },
    // 在store中定义getters(可以认为是store的计算属性)。Getters接收state作为其第一个函数
    getters: {
    done(state) {
    return state.count + 5;
    },
    },
    actions: {
    increment (context) {

    context.commit('increment')
    },
    incrementAsync (context) {

    // 延时1秒
    setTimeout(() => {

    context.commit('increment')
    }, 1000)
    }

    }
    })
    // 要改变状态值只能通过提交mutations来完成

    4.通过$store.state.flag方式来获取或操作自己需要管理的数据

    如果大家有更好的方法或见解希望互相交流

  • 相关阅读:
    RabbitMQ消息队列
    集群概念
    重新学习CSS,认识CSS3中的属性
    计算机网络中,路由器和交换机的区别
    微信小程序中,如何点击链接跳转到外部网页
    微信小程序中,如何实现显示,隐藏密码的功能
    Vue 中引入echarts
    解决Ubuntu(linux)系统中PHP的curl函数无法使用的问题
    数据通信的基本知识
    计算机网络的性能
  • 原文地址:https://www.cnblogs.com/h5it/p/9910429.html
Copyright © 2011-2022 走看看