企业网站营销典型案例_营销知识和技巧_网站开发制作培训学校_推广引流平台app大全

1.示例：使用Pinia管理用户状态信息，在各个组件中进行使用

index.js

import { createRouter, createWebHistory } from 'vue-router'
import {userInfoStore} from "@/stores/user.js";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/login',name: 'login',component: () => import('../views/LoginView.vue')},{path: '/admin',name: 'admin',component: () => import('../views/AdminView.vue'),children: [{path: "",redirect: {name: "mine"}},{path: "mine",name: "mine",component: () => import('../views/MineView.vue')},{path: "order",name: "order",component: () => import('../views/OrderView.vue')}]}]
})
router.beforeEach(function (to,from,next) {// 1.访问登录页面，不需要登录就可以直接去查看if (to.name === "login") {next()return}// 2.检查用户登录状态，登录成功，继续往后走next();未登录，跳转至登录页面// let username = localStorage.getItem("name")const store = userInfoStore()if (!store.userId){next({name:"login"})return;}// 3.登录成功且获取到用户信息，继续向后访问next()
})
export default router

store/user.js

import {ref, computed} from 'vue'
import {defineStore} from 'pinia'export const userInfoStore = defineStore('userInfo', () => {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(() => userString.value ? userDict.value.token : null)function doLogin(info) {localStorage.setItem("info", JSON.stringify(info))userString.value = JSON.stringify(info)}function doLogout(){localStorage.clear()userString.value = null}return {userId, userName, userToken, doLogin, doLogout}
})

App.vue

<script setup></script><template><RouterView />
</template><style scoped>
</style>

LoginView.vue

<template><div class="box"><p>用户名：<input type="text" placeholder="用户名" v-model="msg.username"></p><p>密码：<input type="text" placeholder="密码" v-model="msg.password"></p><p><button @click="doLogin">登录</button></p></div>
</template><script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {userInfoStore} from "@/stores/user.js";const msg = ref({username: "",password: ""
})
const router = useRouter()
const store = userInfoStore()const doLogin = function () {// 1、获取数据console.log(msg.value)// 2、发送网络请求// 3、本地存储用户信息（登录凭证）// localStorage.setItem("name", msg.value.username)let info = {id:1, name: msg.value.username, token: "ddsafhsjdfkj"}store.doLogin(info)// 3、跳转到首页router.push({name:"mine"})
}</script><style scoped>
.box {width: 300px;margin: 100px auto;
}
</style>

AdminView.vue

<template><div class="page-header"><div class="container"><RouterLink to="/admin/mine">我的</RouterLink>|<RouterLink to="/admin/order">订单</RouterLink><div style="float:right;"><a>{{store.userName}}</a><a @click="doLogout">退出1</a></div></div></div><div class="container"><RouterView/></div>
</template><script setup>
import {useRouter} from "vue-router";
import {userInfoStore} from "@/stores/user.js";const router = useRouter()
const store = userInfoStore()function doLogout() {store.doLogout()router.push({name: "login"})
}
</script><style scoped>
body {margin: 0;
}.page-header {height: 48px;background-color: cornflowerblue;line-height: 48px;
}.page-header a {display: inline-block;padding: 0 10px;cursor: pointer;
}.container {width: 980px;margin: 0 auto;
}</style>

---

JS中，const let var的用法区别是什么？

• var：
  • 变量提升（即：先引用后声明）
  • 可多次声明，后一次会覆盖前一次
  • 函数内部声明，则为局部变量
  • 函数外部声明，则为全局变量
• let：
  • 未声明前不可使用
  • 相同作用域内仅可声明一次
• const：
  • 初始化的时候必须赋值
  • 常量：声明后的的值不可更改
  • 变量：声明后的指向的内存地址不能更改，但内存地址中的数据可以更改

https://blog.csdn.net/xiewenhui111/article/details/113133330

---

2. cookie组件

• sudo npm i vue3-cookies
• main.js
  • import VueCookies from “vue3-cookies”;
  • app.use(VueCookies);
• 其他地方
  • import {useCookies} from “vue3-cookies”;
  • const {cookies} = useCookies()
  • cookies.set(key, value, 有效期)
  • cookies.get(key)
  • cookies.remove(key)

stores/user.js

import {ref, computed} from 'vue'
import {defineStore} from 'pinia'
import {useCookies} from "vue3-cookies";const {cookies} = useCookies()export const userInfoStore = defineStore('userInfo', () => {// const userString = ref(localStorage.getItem("info"))// const userDict = computed(() => userString.value ? JSON.parse(userString.value) : null)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.setItem("info", JSON.stringify(info))// userString.value = JSON.stringify(info)cookies.set("info", JSON.stringify(info), 10)userDict.value = info}function doLogout() {// localStorage.clear()// userString.value = nullcookies.remove("info")userDict.value = null}return {userId, userName, userToken, doLogin, doLogout}
})

---

JSON.stringify：将一个 JavaScript 对象或值转换为 JSON 字符串
JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串，可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

JSON.stringify({ x: 1, y: 2 });
// "{"x":1,"y":2}"
JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] })
// "{"x":[10,null,null,null]}"

JSON.parse：将字符串转换为 JavaScript 对象
JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串，可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

const json = '{"result":true, "count":2}';
const obj = JSON.parse(json);
console.log(obj.count);
// 2
console.log(obj.result);
// true

---

JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON教程：https://www.runoob.com/json/json-syntax.html

JSON对象

{ "name":"runoob", "alexa":10000, "site":null }

• JSON 对象使用在大括号 {…} 中书写。
• 对象可以包含多个 key/value（键/值）对。
• key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
• key 和 value 中使用冒号 : 分割。
• 每个 key/value 对使用逗号 , 分割。

JSON数组

[ "Google", "Runoob", "Taobao" ]

• JSON 数组在中括号中书写。
• 中括号 [] 保存的数组是值（value）的有序集合。一个数组以左中括号 [ 开始， 右中括号 ] 结束，值之间使用逗号 , 分隔。
• JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
• JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

---