cookie组件

localStorage和cookie都是本地存储, 区别在于cookie可以在前端设置个限时..

step1: 自己通过命令手动安装cookie组件.. pip install vue3-cookies

step2: 在main.js文件中进行配置

// import './assets/main.css'

import {createApp} from 'vue'
import {createPinia} from 'pinia'
import VueCookies from "vue3-cookies";  // 新增代码

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(VueCookies)  // 新增代码

app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

step3: 我们可以将上一章节pinia的登陆示例中 localStorage的部分全部改为cookie..
只用改 counter.js 文件, 其余文件的代码都不用改.. 就可将示例从 localStorage 过渡到cookie..

import {ref, computed} from 'vue'
import {defineStore} from 'pinia'

import {useCookies} from "vue3-cookies";

const {cookies} = useCookies()

export const userInfoStore = defineStore('userInfo', () => {

    // 基于localStorage
    // const userString = ref(localStorage.getItem("info"))
    //
    // const userDict = computed(() => userString.value ? JSON.parse(userString.value) : null)
    //
    // const userId = computed(() => userDict.value ? userDict.value.id : null)
    // const userName = computed(() => userDict.value ? userDict.value.name : null)
    // const userToken = computed(() => userDict.value ? userDict.value.token : null)

    // 基于cookie
    // ★ 注:取得时候会自动帮忙将info的值反序列化一下,userDict直接得到的就是字典
    //   与localStorage相比,少了一步计算属性的转换.
    const userDict = ref(cookies.get("info"));
    const userId = computed(() => userDict.value ? userDict.value.id : null)
    const userName = computed(() => userDict.value ? userDict.value.name : null)
    const userToken = computed(() => userDict.value ? userDict.value.token : null)


    function doLogin(info) {
        // 基于localStorage
        // localStorage.setItem("info", JSON.stringify(info));
        // userString.value = JSON.stringify(info)  // 若不写这行代码,登陆成功后,压根跳转不过去

        // 基于cookie
        cookies.set("info", JSON.stringify(info), 10);  // 10是有效期,单位是秒
        userDict.value = info
    }

    function doLogout() {
        // 基于localStorage
        // localStorage.clear()
        // userString.value = null

        // 基于cookie
        cookies.remove("info");
        userDict.value = null
    }

    // return啥,外部才能用啥,像userDict就没有暴露给外部.
    return {userId, userName, userToken, doLogin, doLogout}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

在浏览器中右键控制台输入下面的指令, 即可查看本地存储的cookie

> document.cookie
  ''
> document.cookie
  'info=%7B%22id%22%3A1%2C%22name%22%3A%22%22%2C%22token%22%3A%22xxyakaxlod123d%22%7D'

1
2
3
4

← pinia组件 axios组件→