vue2,vue3中，vuex的使用

main.js文件

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

store.js文件

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  // state应该是响应式对象
  state: {
    counter: 0
  },
  mutations: {
    // state从何而来
    add(state) {
      state.counter++
    }
  },
  actions: {
    // 上下文从何而来，长什么样
    add({commit}) {
      setTimeout(() => {
        commit('add')
      }, 1000);
    }
  },
  getters: {
    doubleCounter: state => {
      return state.counter * 2;
    }
  }
})

App.vue

<p @click="$store.commit('add')">{{ $store.state.counter }}</p>
<p @click="$store.dispatch('add')">async{{ $store.state.counter }}</p>
<p>double: {{$store.getters.doubleCounter}}</p>