标签：Vue 浏览器 JWT state cookie 组件 数据
Vue基础学习
目录Vue是一种用于构建用户界面的 JavaScript 框架。在本地使用Vue必须先安装node.js环境，然后在终端输入npm i -g @vue-cli。安装完毕之后，输入vue ui可以启动自带的图形化项目管理界面，之后会进入项目管理器。
在创建中创建你的项目。项目名称需要小写，包管理选择 npm ，预设选择默认 Vue3，可以打开新手指导。
项目创建完毕之后会看见如下画面。
在开始之前建议在插件安装默认两个插件：@vue-cli/plugins-router 和 @vue-cli/plugins-vuex，用于路由和数据传递。像 Bootstrap 的库在依赖中安装（使用Bootstrap需要安装 @popperjs/core）。
创建完项目之后，打开任务栏，点击运行之后，可以打开App看到项目界面。
接下来可以在VS Code中打开项目进行开发，项目目录一般有如下内容。
views文件夹一般用来写各种页面，router用来管理路由，components用来存储各种组件，store用来管理需要全局维护的数据。根组件是 App.vue，项目的整个入口在 main.js 里面。
每一个 .vue 文件名称需要由多个单词构成，内容由三部分组成： <template> <script> <style>，分别对应 HTML Js 和 CSS。<style>可以加属性 scoped ，这样不同组件之间的CSS选择器不会被相互影响。
路由的修改：
先import进来，path就是url的路径，component就是对应的views里的页面。
写完路由后，修改对应的<a>标签，在Vue里需要用到预设的<router-link>标签，:to=""中输入的name就是上面路由里的name。
使用router.push({name: 'userlist'})也可以实现跳转页面
如何将组件导出？
export default对象的属性：
name：组件的名称
components：存储<template>中用到的所有组件
props：存储父组件传递给子组件的数据
watch()：当某个数据发生变化时触发
computed：动态计算某个数据
setup(props, context)：初始化变量、函数
ref：定义变量，可以用.value属性重新赋值
reactive：定义对象，不可重新赋值
props：存储父组件传递过来的数据
context.emit()：触发父组件绑定的函数
定义组件的数据？
通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与setup搭配使用。在setup中定义该组件的数据，定义的方式有两种 ref 和 reactive，数据不用修改的时候用 reactive，运行效率比 ref 高一点，但必须传递对象。
定义完数据之后，需要在setup中 return 出去，这样就可以在<template>中使用该数据。如果setup中需要使用props的数据，需要传递给 setup(props) ，因为setup中没有 this 属性。
子组件接收消息：
如果使用的数据需要通过动态地计算出来，那么需要使用computed属性。
子父组件传递信息？
父组件向子组件传递信息通过 props 属性来传递。
而子组件向父组件传递信息需要在父组件内绑定事件，然后子组件利用api context.emit()来触发父组件绑定的函数
获取在textarea中的信息？
在textarea标签中添加v-model="content"，可以将textarea中的内容和content绑定起来。
如果需要取出ref的值，则要用 .value 属性
向服务器获取信息？
let users = ref([]);
$.ajax({
url: "",
type: "",
success(resp) {
users.value = resp;
}
})
Vuex
vuex：维护state树，存储全局状态，全局唯一。
state: 存储所有数据，可以用modules属性划分成若干模块
getters：根据state中的 值计算新的值
mutations：所有对state的修改操作都需要定义在这里，不支持异步，可以通过$store.commit()触发
actions：定义对state的复杂修改操作，支持异步，可以通过$store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。
modules：定义state的子模块
可以把单独的 module 分离出来作为一个js文件，用来维护常用的数据
如果想要在外面调用action里某一个对象或者函数的话，需要用store.dipatch() 。调用mutations里的API使用commit，如果是actions里的API使用dispatch。
如何解码JWT中的 userid？
需要使用jwt-decode包中的jwt_decode。
为什么要用jwt，而不用传统的cookie?（cookie session jwt的区别）
jwt可以不用将缓存存储在服务器端。
cookie：浏览器发起http请求，服务器会进行cookie设置，也就是set-cookie（里面有name和value两个值 ），浏览器接受数据后保存起来，这样浏览器以后发送的每一个请求都会自动附上这个cookie。说白了cookie就是存储在浏览器的一种数据而已，可以在浏览器缓存中看见已保存的cookie，这样很不安全。
session：session就是会话，你和服务器建立连接就是会话的开始，比较模糊的是结束会话的时间，因为关掉网页有可能是按错了，因此不同的网站对于每个用户的会话都设定了时间以及唯一的ID，这个ID就是 session ID。服务器验证完用户密码后，会产生session ID和会话结束时间，并把这些信息发送给浏览器，然后浏览器将其保存，以后每次发送请求都在cookie中添加session ID。
jason web token：用户第一次登录网页以后，服务器生成一个JWT，服务器不用保存这个JWT，只需要保存JWT签名的密文，接着把JWT发送给浏览器，可以让浏览器以cookie或者storage的形式进行存储， 以后每次发送请求都附带上JWT。JWT由三部分组成 header.playload.signature，header部分声明需要用什么算法来生成签名，playload部分是一些特定的数据，比如有效期之类。
关于在别人页面不能跳回自己主页的问题？
因为在跳转其他主页的时候是不包含参数的，因此跳转的依然是当前用户的主页，而不是自己的主页。
出现这个问题的原因是，route路由将userprofile/userid/归到同一类，自动地用路由的name来判重，所以无法跳转到个人主页。
解决这个问题是在App.vue里面添加key参数。判重时带上userid的参数，用完整路径
标签：Vue,浏览器,JWT,state,cookie,组件,数据 来源： https://www.cnblogs.com/FailBetter/p/16351300.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。