zoukankan      html  css  js  c++  java
  • 使用vuex管理数据

    src/vuex/store.js

    组件里面使用引入store.js,注意路径

    import store from 'store.js'

    然后在使用的组件内data(){}同级放入store

    三大常用的方法state,mutations,getters

    重要的一步,当把state,mutation,getter写完之后,需要向外暴露接口

    const store=new Vuex.Store({
    state,

    mutations,
    getters
    })

    export default store

    import Vue from 'vue'

    import Vuex from 'vuex'

    Vue.use(Vuex)

    //管理的数据,存储起来

    var state={
    num:1
    }

    若外边的组件想用这个值,this.$store.state.num

    方法,可以在组件里面事件引用

    var mutations={
    inc:function(){
    ++state.num
    }
    }

    例如 <button @click="changeState"></button>,用组件里的事件映射store里面的事件

    changeNum:function(){
    this.$store.commit('inc')
    }

    getters方法类似于mounted计算属性

    var getters={
    computedNum:function(state){
    return state.num*2
    }
    }

    组件里面的视图更新执行方法

    {{this.$store.getters.computedNum}}

    最后,分清他们的用途,就可以愉快使用vuex了

  • 相关阅读:
    大一秋学期记录
    韦尼克区受损者如何说话
    暑假训练idea汇总
    高三树洞
    OI回忆录
    NOI2018游记
    收藏
    PKUSC2018游记
    CTSC/APIO2018游记
    Caused by: org.xml.sax.SAXParseException: 外部 DTD: 无法读取外部 DTD 'mybatis-generator-config_1_0.dtd'
  • 原文地址:https://www.cnblogs.com/lwj820876312/p/9113604.html
Copyright © 2011-2022 走看看