vuex 状态管理

• 1.安装vuex ：
  • npm i vuex
• 1.在store里引入vuex：
  • import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex);

store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

// 1. 存数据
var state = {
    count: 1
}
//  2.方法 改变state里面的数据
var mutations = {
    inCountAdd() { //加
        ++state.count
    },
    inCount_() { //减
        --state.count
    }
}

//实例化vuex.store
const store = new Vuex.Store({
    state,
    mutations
})
export default store;

home.vue

<template>
  <div class="hello">
    home
    {{this.$store.state.count}}
    <button @click="incCount">增加</button>
  </div>
</template>

<script>
import store from "../vuex/store";

export default {
  methods: {
    incCount() {
      this.$store.commit("inCountAdd");//增加
    }
  },
  store,
  data() {}
};
</script>

<style scoped>
</style>

new.vue

<template>
  <div>
    {{this.$store.state.count}}
    <br />
    <button @click="icCoount_">减</button>
  </div>
</template>

<script>
import store from "../vuex/store";
export default {
  store,
  methods: {
    icCoount_() {
      this.$store.commit("inCount_");//减
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

原文地址：https://www.cnblogs.com/divtab/p/11529089.html