文章目录
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)的响应式解构