Pinia 上手指南 -- 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？(1)

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

}

}

})

// 另外一种方式

export const useStore = defineStore(‘count’, { // 将id作为第一个参数

state: () => {

return {

count: 0

}

}

})

获取 state

{{ countStore.count }}

也可以结合 computed 获取

let count = computed(() => countStore.count)

state 也可以使用解构，但使用解构会使其失去响应式，这时候可以用 pinia 的 storeToRefs

import { storeToRefs } from ‘pinia’;

let { count } = storeToRefs(countStore);

重置 state

可以通过调用 store 上的方法将 state _重置_为其初始值：$reset()

let countStore = useStore();

countStore.$reset();

更换 state

可以通过将 store 中的$state属性设置为新对象来替换 store 的整个 state

let countStore = useStore();

countStore.$state = { count: 0 };

修改 state

可以如下直接修改 state

let countStore = useStore();

countStore.count++

但一般不建议这么做，而是通过 actions 去修改 state，actions 里可以直接通过 this 访问

// count.js

export const useStore = defineStore({

id: ‘count’,

state: () => {

return {

count: 0

}

},

actions: { // 建议通过action修改state，更符合业务逻辑

increment() {

this.count++

}

}

})

订阅（监听）state

可以通过$subscribe()观察 state 及其变化，类似于 Vuex 的subscribe 方法

let countStore = useStore();

countStore.$subscribe((mutation, state) => {

console.log(mutation);

console.log(“监听count变化触发的回调，count的值为：”, state.count);

count = state.count;

});

// 可以在监听到state变化后执行某些操作

当 state 变化时，控制台打印

3、Getters

---

创建 getters

export const useStore = defineStore({

id: ‘count’,

state: () => {

return {

count: 0

}

},

getters: {

doubleCount(state) {

return state.count * 2

}

}

})

使用其他 getters

大多数时候，getters 只会依赖状态，但是有时候可能需要使用其他 getters

export const useStore = defineStore({

id: ‘count’,

state: () => {

return {

count: 0

}

},

getters: {

doubleCount(state) {

return state.count * 2;

},

doublePlusOne() {

return this.doubleCount + 1;

}

}

})

可以直接在 countStore 实例上访问 getters

{{ countStore.doubleCount }}

{{ countStore.doublePlusOne }}

访问其他 store 中的 getters

import { useOtherStore } from ‘./other-store’

export const useStore = defineStore({

id: ‘count’,

state: () => ({

// …

}),

getters: {

otherGetter(state) {

let otherStore = useOtherStore();

return state.count + otherStore.data;

},

},

})

4、Actions

---

创建 actions

export const useStore = defineStore({

id: ‘count’,

state: () => {

return {

count: 0

}

},

actions: {

increment() {

this.count++;

},

randomCount() {

this.count = Math.round(100 * Math.random());

}

}

})

像 getters 一样，actions 通过完全输入（和自动完成）支持访问_整个 store 实例_。与它们不同的是，它可以是异步的。

异步 actions

actions 可以像写一个简单的函数一样支持 async/await 的语法，让你愉快地应付异步处理的场景

export const useStore = defineStore({

id: ‘login’,

actions: {

async login(account, pwd) {

let { data } = await api.login(account, pwd);

return data;

}

}

})

访问其他 store 中的 actions

import { useAuthStore } from ‘./auth-store’

export const useSettingsStore = defineStore({

id: ‘settings’,

state: () => ({

// …

}),

actions: {

async fetchUserPreferences(preferences) {

let authStore = useAuthStore();

if (authStore.isAuthenticated) {

this.preferences = await fetchPreferences();

} else {

throw new Error(‘User must be authenticated’);

}

}

}

})

订阅 actions

可以使用store.$onAction()观察 actions 及其结果。传递给它的回调在操作本身之前执行。after处理承诺并允许你更改操作的返回值。onError允许你阻止错误传播。这些对于在运行时跟踪错误很有用，类似于Vue 文档中的这个技巧。

这是一个在运行操作之前和它们解决/拒绝之后记录的示例

// 订阅（监听）actions

store.$onAction(

({

name, // name of the action

store, // store instance, same as someStore

args, // array of parameters passed to the action

after, // hook after the action returns or resolves

onError, // hook if the action throws or rejects

}) => {

console.log(“name：”,name);

console.log(“store：”,store);

console.log(“before store.count：”,store.count);

console.log(“args”,args);

// this will trigger if the action succeeds and after it has fully run.

// it waits for any returned promised

after(() => {

console.log(“after store.count：”,store.count);

});

// this will trigger if the action throws or returns a promise that rejects

onError((error) => {

console.log(error);

});

}

);

当触发 actions 时，控制台打印

默认情况下，操作订阅_绑定到添加它们的组件（如果 store 位于组件的 内部setup()）。意思是，当组件被卸载时，它们将被自动删除。如果要在卸载组件后保留它们，请将true作为第二个参数传递来把_操作订阅_与当前组件_分离

export default {

setup() {

let someStore = useSomeStore();

// this subscription will be kept after the component is unmounted

someStore.$onAction(callback, true)

// …

},

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

如果要在卸载组件后保留它们，请将true作为第二个参数传递来把_操作订阅_与当前组件_分离_

export default {

setup() {

let someStore = useSomeStore();

// this subscription will be kept after the component is unmounted

someStore.$onAction(callback, true)

// …

},

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

[外链图片转存中…(img-bDpU1j4h-1715791263673)]

[外链图片转存中…(img-8o7yaaLp-1715791263673)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】