zoukankan      html  css  js  c++  java
  • vue之vuex

    vuex负责vue的数据管理和共享,适用于大型项目

    安装vuex

    npm install vuex --save;

    运用vuex

    主要有五大金刚:

    export default new Vuex.Store({//$store为了让外部可以引用
        state,//数据存储
        mutations,//行为动作
        actions,//异步改变state状态,也就是提交mutations的一些修改 $store.commit('things')
        getters//获取属性进行操作
    })

    简单编写

    const state={
      count:1,
      bin:{
    		names:'chen'
    	}
    }
    const mutations={
      add(state){
      	this.state.count+=1
      },
      reduce(state){
      	this.state.count-=1
      }
    }
    
    const actions={
    
    }
    const getters={
    	
    }
    

     模块类型编写

    模块封装
    const moduleA={
    	state:{
    		count:0,
    		
    	},
    	mutations:{
    		add(state){
    			this.state.a.count+=100
    		},
    		reduce(state){
    			this.state.a.count-=100
    		}
    	},
    	actions:{}
    }
    const moduleB={
    	state:{},
    	mutations:{},
    	actions:{}
    }
    export default new Vuex.Store({
    	modules:{
    		a:moduleA,
    		b:moduleB
    	}
    })
    

      页面渲染数据和事件

    <button onClick={this.$store.commit(reduce)}><button>
    <button>this.$store.state.count<button>
    <button onClick={this.$store.commit(add)}><button>
  • 相关阅读:
    HDU 5963 朋友
    BZOJ 4805 欧拉函数求和
    BZOJ 2153 设计铁路
    BZOJ 2631 tree
    BZOJ 4804 欧拉心算
    BZOJ 4806 炮
    BZOJ 3774 最优选择
    BZOJ 4800 Ice Hockey World Championship
    BZOJ 3894 文理分科
    北方大学多校联合训练第十一场E:Modules
  • 原文地址:https://www.cnblogs.com/wdxue/p/8327590.html
Copyright © 2011-2022 走看看