当前位置：首页 > news >正文

vuex和Pinia

news 来源：原创 2024/9/19 13:05:25

文章目录

1.vuex
- 1.1 veux概述
- 1.2 创建仓库
- 1.3 给仓库提供数据以及使用仓库数据
- - 1.3.1 提供数据
  - 1.3.2 使用数据
2.Pinia
- 2.1 什么是Pinia
- 2.2 使用Pinia
- 2.3 storeToRefs工具函数

1.vuex

1.1 veux概述

（1）vuex是什么：
①vuex 是一个 vue 的状态管理工具，状态就是数据。
②简单点说：vuex 是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)
（2）场景：
①某个状态在很多个组件中被使用 (个人信息)
② 多个组件共同维护一份数据 (购物车)
（3）优势：
①共同维护一份数据，数据集中化管理
②响应式变化
③操作简洁 (vuex提供了一些辅助函数）

1.2 创建仓库

（1）安装vuex(vue2使用的版本是vuex3，vue3使用的是vuex4)

yarn add vuex@3

（2）新建vuex模块文件(一般在src下新建store目录，建立index.js)

// 这里存放的就是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
// 插件安装
Vue.use(Vuex)
// 创建仓库(空仓库)
const store = new Vuex.Store()
// 导出给main.js使用
export default store

（3）在main.js中导入并挂载到Vue实例中

import Vue from 'vue'
import App from './App.vue'
// @就是src目录
import store from '@/store/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

1.3 给仓库提供数据以及使用仓库数据

1.3.1 提供数据

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。

import Vue from 'vue'
import Vuex from 'vuex'
// 插件安装
Vue.use(Vuex)
// 创建仓库
const store = new Vuex.Store({// state状态，即数据，类似于vue组件中的data// 区别：// 1.data是组件自己的数据// 2.state是所有组件共享的数据state: {title: '大标题',count: 100}
})
export default store

1.3.2 使用数据

（1）通过 store 直接访问

在这里插入图片描述

（2）通过辅助函数(简化了步骤可以直接访问)
①导入mapState，mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计
②数组方式引入state
③直接使用

在这里插入图片描述

2.Pinia

2.1 什么是Pinia

Pinia 是 Vue 的最新状态管理工具，是 Vuex 的替代品
（1）提供更加简单的API （去掉了 mutation ）
（2）提供符合，组合式风格的API （和 Vue3 新语法统一）
（3）去掉了 modules 的概念，每一个 store 都是一个独立的模块
（4）配合 TypeScript 更加友好，提供可靠的类型推断

2.2 使用Pinia

（1）使用包管理器安装Pinia

yarn add pinia
// 或者使用npm
npm install pinia

（2）安装Pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia() // 创建Pinia实例createApp(App).use(pinia).mount('#app')

（3）使用Pinia
①与Vue的选项式API类似,我们也可以传入一个带有state、actions与getters属性的Option 对象

// 定义store
// 语法：defineStore(仓库的唯一标识,() => { ... })
export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),getters: {doubleCount: (state) => state.count * 2,},actions: {increment() {this.count++},},
})

state 是 store 的数据 (data)
getters 是 store 的计算属性 (computed)，
actions 则是方法 (methods)。

②也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

export const useCounterStore = defineStore('counter', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function addCount() {count.value++}return { count, doubleCount, addCount }
})