Vue3-集成Vuex4.0版本

1. 安装

npm install --save vuex@next

2. 根目录下创建 store 文件夹，新建index.js

import { createStore } from 'vuex'

/**
 * 异常："export 'createStore' was not found in 'vuex'
 * vuex 版本低了，提升vuex安装版本。
 * 操作：
 * 1. 先卸载：npm uninstall vuex
 * 2. 安装最新：npm install --save vuex@next
 */

const store = createStore({

    /**
     * 集中存储组件的状态
     */
    state: {
        count: 2,
        orderData: {}
    },

    /**
     * 改变数据方法的集合
     */
    mutations: {
        increment(state, n) {
            state.count += n;
        },
        updateOrderData(state, data) {
            for (let key in data) {
                console.log(key, data[key]);
                state.orderData[key] = data[key];
            }
            console.log("缓存结果: ", state.orderData);
        }
    },

    /**
     * 改变mutations，不直接变更状态
     */
    actions: {
        increment(context) {
            context.commit('increment');
        },
        updateOrderData(context) {
            context.commit('updateOrderData');
        }
    },

    /**
     * 可以将store进行功能拆分，分割成不同的模块
     */
    modules: {

    },

    getters: {
        getCount(state) {
            return state.count;
        },

        getOrderData(state) {
            return state.orderData;
        }
    }
})

export default store;

3. 全局main.js 引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import store from './store'

const app = createApp(App)
// 全局配置
app.config.globalProperties.$axios = axios;
// 注入组件
app.use(router).use(store);
// 挂载
app.mount('#app')

4.组件改变状态值

this.$store.commit("increment", 1);
this.$store.commit("updateOrderData", { counter: 2 });

5. 组件获取状态值

<template>
  <div>品牌营销 {{ getCount }} -- {{ getOrderData }}</div>
</template>

<script>
export default {
  name: "loud",
  data() {
    return {};
  },

  computed: {
    getCount() {
      return this.$store.getters.getCount;
    },
    getOrderData() {
      return this.$store.getters.getOrderData;
    },
  },
};
</script>
<style lang="less" scoped>
</style>