vuex

vuex 的基本操作

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:1
  },
  //计算属性
  getters:{
    getadd(state) {
      return state.count+1
    }
  },
  //修改state里面的数据推荐使用
  mutations: {
  updateOrder(state, data) { // data = {key: value}
    // console.log(data)
    state.count = data
  },
  },
  // 支持异步该数据
  actions: {
    updateyibu(context, data) {
      setTimeout(()=>{
         context.commit('updateOrder', data)
      },3000)
    }
  }
})

调用方法

<template>
  <div class="int1">
    <h1>vuex</h1>
    {{$store.state.count}}
    {{this.$store.getters.getadd}}
    <div class="int2">{{data}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: "as"
    };
  },
  created() {
    this.$store.commit("updateOrder", 2);
    this.$store.dispatch('updateyibu',9)
  }
};
</script>
<style lang="scss">
.int1 {
  width: 100px;
  height: 100px;
  background-color: #cc4899;
  .int2 {
    width: 100px;
    position: relative;
    left: 200px;
    height: 100px;
    background-color: #00ff88;
  }
}
</style>