vue项目使用vuex

1、首先下载 vuex

npm install vuex --save

2、在 main.js 中引入 

import store from './store'
createApp(App).use(store)

3、在store中的index页面增加一下代码

import { createStore } from 'vuex';
import shopMall from './modules/shopMall';
const store = createStore({
  modules: {
    shopMall
  }
});

export default store;

4、在store里面增加一个shopMall 页面增加一下代码:主要是用vuex保存详情的数据

export default ({
  state: {
    detailData: null
  },
  mutations: {
    SET_DETAILDATA(state, detailData) {
      state.detailData = detailData;
    },
    clearDetailData(state) {
      state.detailData = null;
    },
  },
  actions: {
    setDetailData({ commit }, credentials) {
      commit('SET_DETAILDATA', credentials);
    },
    clearDetailData({ commit }) {
      commit('clearDetailData');
    },
  },
  getters: {
    getDetailData: state => state.detailData,
  }
});

5、在页面中把数据存储起来

import { useStore } from 'vuex';
const store = useStore();
console.log('需要保存数据', params)
store.dispatch('setDetailData', params);

6、在需要的页面把数据拿出来用

import { computed } from 'vue'

const detailData = computed(() => store.getters.getDetailData || {});

console.log('详情数据', detailData.value)