Vue3 store仓库数据间流转 Vuex4 + Pinia

上文 讲了vue2数据流转处理的方法 这文讲讲vue3

Vuex

在 Vue 3 中 可以使用 Vuex 4 来进行状态管理和存取数据。
1 创建一个 store 实例

// store.js

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      data: null // 初始化数据为空
    };
  },
  mutations: {
  	// 操作数据
    setData(state, payload) {
      state.data = payload; // 设置数据
    }
  },
  actions: {
  	// 触发mutations
    fetchData({ commit }) {
      // 模拟异步获取数据
      setTimeout(() => {
        const newData = '这是新的数据'; // 模拟获取的数据
        commit('setData', newData); // 调用 mutation 设置数据
      }, 1000);
    }
  },
  getters: {
  	//简化数据
    getData(state) {
      return state.data; // 获取数据
    }
  }
});

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 在组件中访问和修改数据：
*** 在 Vue 3 中使用 Vuex 进行数据的存取和修改。state 存储数据，mutations 修改数据，actions 异步操作和提交 mutations，getters 获取数据。***

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

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

    // 获取数据
    const data = computed(() => store.getters.getData);

    // 修改数据
    const updateData = () => {
      const newData = '这是更新后的数据';
      store.commit('setData', newData);
    };

    // 异步获取数据
    const fetchData = () => {
    	// dispatch 触发actions方法函数
      store.dispatch('fetchData');
    };

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

Pinia配置式api写法

1 创建一个 Pinia store 实例

// store.js

import { defineStore } from 'pinia';

export const useStore = defineStore('store', {
  state() {
    return {
      data: null // 初始化数据为空
    };
  },
  actions: {
    updateData(newData) {
      this.data = newData; // 更新数据
    }
  }
});

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 在组件中访问和修改数据：

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

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

    // 获取数据
    const data = computed(() => store.data);

    // 修改数据
    const updateData = () => {
      const newData = '这是更新后的数据';
      store.updateData(newData);
    };

    return {
      data,
      updateData
    };
  }
};

Pinia 组合式api 写法

pinia 省略了mutations操作 语法更加简洁 也是vue数据仓库的趋势
1 创建一个 Pinia store 实例

// store.js

import { createPinia } from 'pinia';

export const store = createPinia();

store.state({
  data: null // 初始化数据为空
});

2 在 main.js 中引入并挂载 Pinia：

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

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

3 在组件中访问和修改数据：

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

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

    // 获取数据
    const data = computed(() => store.state.data);

    // 修改数据
    const updateData = () => {
      const newData = '这是更新后的数据';
      store.state.data = newData;
    };

    return {
      data,
      updateData
    };
  }
};

前端 提供的是一份数字化的产品 而基础便是数据
对于数据的处理确实是前端开发中重要一环