vuex和Pinia

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 = false

new 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 }
})

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

（4）示例：

2.3 storeToRefs工具函数

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构