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

这篇具有很好参考价值的文章主要介绍了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
    };
  }
};

前端 提供的是一份数字化的产品 而基础便是数据
对于数据的处理确实是前端开发中重要一环文章来源地址https://www.toymoban.com/news/detail-623251.html

到了这里,关于Vue3 store仓库数据间流转 Vuex4 + Pinia的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】VueX仓库

            📝个人主页:五敷有你        🔥系列专栏:Vue ⛺️稳中求进,晒太阳 目录 Vue概述 是什么 场景: 优势 构建多组件共享环境 创建一个空仓库 核心概念 - state 状态 1. 提供数据 2.使用数据 ​编辑 通过辅助函数(简化) 核心概念 - mutations 步骤: 传参: 辅助函数

    2024年03月13日
    浏览(28)
  • vue3中使用vuex

    最近发现自己遗忘了一些东西,所以就去恶补了一下vuex的使用,结果还行还用有点变化的,vue3中使用vuex和vue2中完全不一样,vue3中必须使用vuex4 vuex官网 官方解释 Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 + 库 。它采用集中式存储管理应用的所有组件的状态,并以

    2024年01月19日
    浏览(35)
  • vue3.2中的vuex使用

    Vuex 中有以下几个核心概念: State:应用程序的状态存储在单一的状态树中,即 State。State 可以通过 store.state 属性访问。 Mutation:状态的变化必须通过提交 Mutation 来进行。Mutation 是一个包含 type 和 payload 属性的对象,type 是 Mutation 的类型,payload 是 Mutation 的有效负载。Mutat

    2023年04月11日
    浏览(38)
  • Vue3 store+pinia 基本使用

    pinia是一个 状态管理的库 ,用于 跨组件、页面进行状态共享 (这和Vuex、Redux一样),用起来像组合式API Pinia和Vuex有什么区别 1、PInia的最初是为了探索Vuex的下一次迭代会是什么样子,结合了Vuex核心团队讨论中的许多想法; 2、最终,团队意识到Pinia已经实现了Vuex5中大部分内

    2024年02月07日
    浏览(51)
  • Vue2向Vue3过度Vuex核心概念mutations

    1.定义mutations 2.格式说明 mutations是一个对象,对象中存放修改state的方法 3.组件中提交 mutations 4.练习 1.在mutations中定义个点击按钮进行 +5 的方法 2.在mutations中定义个点击按钮进行 改变title 的方法 3.在组件中调用mutations修改state中的值 5.总结 通过mutations修改state的步骤 1.定义

    2024年02月11日
    浏览(41)
  • vue2+webpack升级vue3+vite,在vue3组合式编程中使用vuex

    同学们可以私信我加入学习群! 我的项目是从vue2+webpack升级为vue3+vite,这种升级工作,其实最重要的不是如何快速准确地把原有vue2项目全部重构为vue3项目,因为这是不现实的。 升级工作一定是一个长久的持续过程,所以如何保证旧的vue2项目与新的vue3模块之间互相兼容,才

    2024年01月18日
    浏览(54)
  • vue2(Vuex)、vue3(Pinia)、react(Redux)状态管理

    Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它使用集中式存储管理应用的所有组件的状态,以及规则保证状态只能按照规定的方式进行修改。 State(状态) :Vuex 使用单一状态树,即一个对象包含全部的应用层级状态。这个状态树对应着一个应用中的所有状态。 Gett

    2024年01月23日
    浏览(48)
  • vue3 实现监听store里state状态变化

    需要注意: 不能直接监听对象的属性值,需要写成getter函数。 总结: watch 的第一个参数可以是不同形式的数据源,它可以是一个ref(包括计算属性),一个响应式对象,一个getter函数,或多个数据源组成的数组。 不能直接监听响应式对象的属性: 这里需要写成返回对象属

    2024年02月17日
    浏览(41)
  • vue3中使用route、router、store的方式

    route:  (1) vue3写法:  (2) vue2写法:  router:  (1) vue3写法:  (2) vue2写法:  store:  (1) vue3写法:  (2) vue2写法:

    2024年02月13日
    浏览(42)
  • vue3中监听,组件通信如父子传值、Vuex、Event Bus的使用

    目录 一、监听 二、父子传值: 1、父传子: 2、子传父 三、全局状态管理(Vuex): 四、事件总线(Event Bus): 我们有一个父组件ParentComponent和一个子组件ChildComponent。在父组件中,我们使用:childProp=\\\"parentData\\\"将数据传递给子组件。在子组件中,我们使用defineProps来接收父组件

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包