vuex简单使用demo-526互联

// store.js 文件中定义了 store
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state, payload) {
      state.count += payload;
    },
  },
  actions: {
    incrementAsync({ commit }, payload) {
      setTimeout(() => {
        commit('increment', payload);
      }, 1000);
    },
  },
});

export default store;

// main.js 中引入 store 和 createApp
import { createApp } from 'vue';
import store from './store.js';
import App from './App.vue';

const app = createApp(App);

// 将 store 实例放入 provide 方法中提供给子组件使用
app.provide('store', store);

app.mount('#app');

javascript
// 组件中调用带有参数的 action
import { inject } from 'vue';
export default {
  setup() {
    const store = inject('store');

    // 调用带有参数的 action
    const handleClick = () => {
      store.dispatch('incrementAsync', 5);
    };

    return {
      handleClick,
    };
  },
};

vuex