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)的响应式解构
在这里插入图片描述

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部