上文 講了vue2數(shù)據(jù)流轉(zhuǎn)處理的方法 這文講講vue3

Vuex

在 Vue 3 中 可以使用 Vuex 4 來(lái)進(jìn)行狀態(tài)管理和存取數(shù)據(jù)。
1 創(chuàng)建一個(gè) store 實(shí)例

// store.js

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      data: null // 初始化數(shù)據(jù)為空
    };
  },
  mutations: {
  	// 操作數(shù)據(jù)
    setData(state, payload) {
      state.data = payload; // 設(shè)置數(shù)據(jù)
    }
  },
  actions: {
  	// 觸發(fā)mutations
    fetchData({ commit }) {
      // 模擬異步獲取數(shù)據(jù)
      setTimeout(() => {
        const newData = '這是新的數(shù)據(jù)'; // 模擬獲取的數(shù)據(jù)
        commit('setData', newData); // 調(diào)用 mutation 設(shè)置數(shù)據(jù)
      }, 1000);
    }
  },
  getters: {
  	//簡(jiǎn)化數(shù)據(jù)
    getData(state) {
      return state.data; // 獲取數(shù)據(jù)
    }
  }
});

export default store;

2 在 main.js 中引入并掛載 store：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

3 在組件中訪問(wèn)和修改數(shù)據(jù)：
*** 在 Vue 3 中使用 Vuex 進(jìn)行數(shù)據(jù)的存取和修改。state 存儲(chǔ)數(shù)據(jù)，mutations 修改數(shù)據(jù)，actions 異步操作和提交 mutations，getters 獲取數(shù)據(jù)。***

import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    // 獲取數(shù)據(jù)
    const data = computed(() => store.getters.getData);

    // 修改數(shù)據(jù)
    const updateData = () => {
      const newData = '這是更新后的數(shù)據(jù)';
      store.commit('setData', newData);
    };

    // 異步獲取數(shù)據(jù)
    const fetchData = () => {
    	// dispatch 觸發(fā)actions方法函數(shù)
      store.dispatch('fetchData');
    };

    return {
      data,
      updateData,
      fetchData
    };
  }
};

Pinia配置式api寫法

1 創(chuàng)建一個(gè) Pinia store 實(shí)例

// store.js

import { defineStore } from 'pinia';

export const useStore = defineStore('store', {
  state() {
    return {
      data: null // 初始化數(shù)據(jù)為空
    };
  },
  actions: {
    updateData(newData) {
      this.data = newData; // 更新數(shù)據(jù)
    }
  }
});

2 在 main.js 中引入并掛載 Pinia：

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');

3 在組件中訪問(wèn)和修改數(shù)據(jù)：

import { computed } from 'vue';
import { useStore } from 'pinia';

export default {
  setup() {
    const store = useStore();

    // 獲取數(shù)據(jù)
    const data = computed(() => store.data);

    // 修改數(shù)據(jù)
    const updateData = () => {
      const newData = '這是更新后的數(shù)據(jù)';
      store.updateData(newData);
    };

    return {
      data,
      updateData
    };
  }
};

Pinia 組合式api 寫法

pinia 省略了mutations操作 語(yǔ)法更加簡(jiǎn)潔 也是vue數(shù)據(jù)倉(cāng)庫(kù)的趨勢(shì)
1 創(chuàng)建一個(gè) Pinia store 實(shí)例

// store.js

import { createPinia } from 'pinia';

export const store = createPinia();

store.state({
  data: null // 初始化數(shù)據(jù)為空
});

2 在 main.js 中引入并掛載 Pinia：

import { createApp } from 'vue';
import App from './App.vue';
import { store } from './store';

createApp(App).use(store).mount('#app');

3 在組件中訪問(wèn)和修改數(shù)據(jù)：

import { computed } from 'vue';
import { useStore } from 'pinia';

export default {
  setup() {
    const store = useStore();

    // 獲取數(shù)據(jù)
    const data = computed(() => store.state.data);

    // 修改數(shù)據(jù)
    const updateData = () => {
      const newData = '這是更新后的數(shù)據(jù)';
      store.state.data = newData;
    };

    return {
      data,
      updateData
    };
  }
};

前端 提供的是一份數(shù)字化的產(chǎn)品 而基礎(chǔ)便是數(shù)據(jù)
對(duì)于數(shù)據(jù)的處理確實(shí)是前端開(kāi)發(fā)中重要一環(huán)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-623251.html

到了這里，關(guān)于Vue3 store倉(cāng)庫(kù)數(shù)據(jù)間流轉(zhuǎn) Vuex4 + Pinia的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！