VUEX的使用

1、导入全局注册

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store

2、state 存放共享数据 3、mutations 只能通过mutation改变state的值

mutations: { add(state) { state.number++ }, jian(state) { state.number-- }, addn(state, n) { state.number += n }, jiann(state, n) { state.number -= n }

4、 actions 当需要异步操作的时候，在action中定义 我认为就是方便状态管理。

actions: { addAsybc(context) { setTimeout(function () { context.commit('add') }, 1000) } },

context可以认为是vuex 的实例

5、Getter 对外包装的作用，数据处理

getters:{ showNum(state){ return '当前值'+state.number }

引用

{{$store.getters.showNum}}

组件引入方式

直接引用

当前值:{{this.$store.state.number}} <button @click="$store.commit('add')">++</button> import {mapState,mapMutations,mapActions} from 'vuex' export default { name: "myMainVueX", data(){return { }}, methods:{ ...mapMutations(["jian",'jiann']), addn(){ this.$store.commit('addn',2) }, jian1(){ this.jian() }, jiann1(){ this.jiann(3) }, addAsync(){ this.$store.dispatch('addAsybc') } } }

导入引用 action引入用dispatch方法