状态管理Vuex

官网：Vuex 是什么？ | Vuex (vuejs.org)https://v3.vuex.vuejs.org/zh/

创建一个vue2的新项目名为vuex-demo，安装命令 npm install vuex@3

新建index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    }
  })

export default store

修改main.js，注入

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store: store
}).$mount('#app')

HelloWorld.vue修改

<template>
  <div class="hello">
  {
  { this.$store.state.count }}
  <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    add() {
      this.$store.commit('inc