vuex

  • 安装vuex
npm install vuex --save
  • main.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:1,
  },
  getter:{
    getStateCount(state){
      return state.count+1;
    }
  },
  mutations: {
    add(){
      state.count = state.count+1;
    },
    delete(n){
      state.count = state.count-n;
    }
  },
  actions: {
    addFun(context){
      context.commit("add");
    },
    deleteFun(context){
       context.commit("delete",n);
    }
  }
})

组件中使用方式

this.$store.state.count;
this.$store.getter.getStateCount;
this.$store.commit("add");
this.$store.dispatch("addFun");
this.$store.dispatch("deleteFun",10);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,703评论 7 61
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 2,045评论 3 3
  • 原文:https://medium.com/3yourmind/large-scale-vuex-applicat...
    Hyelim阅读 2,203评论 1 5
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,082评论 4 111
  • 目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念?||如何在组件中去使用...
    我跟你蒋阅读 4,168评论 4 51