① vuex 与 vue有什么区别
首先vue是一个前端框架（与angular和react同级别），vuex只是vue的一个插件，官网说vuex是状态管理工具，其实说白了，vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器，就是说来存放处理公共数据的工具，存放的数据一变，各个组件都会更新，也就是说存放的数据是响应式的。
② Pinia 快速入门
Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3
符合直觉，易于学习
极轻， 仅有 1 KB
模块化设计，便于拆分状态
安装需要 @next 因为 Pinia 2 处于 beta 阶段, Pinia 2 是对应 Vue3 的版本
创建一个 pinia（根存储）并将其传递给应用程序：
Store 是一个保存状态和业务逻辑的实体，可以自由读取和写入，并通过导入后在 setup 中使用
创建一个 store
Pinia 中的 Getters 作用与 Vuex 中的 Getters 相同，但使用略有差异
Pinia 中的 Getters 直接在 Store 上读取，形似 Store.xx，就和一般的属性读取一样
Pinia 没有 Mutations，统一在 actions 中操作 state，通过this.xx 访问相应状态
虽然可以直接操作 Store，但还是推荐在 actions 中操作，保证状态不被意外改变
action 和普通的函数一样
action 同样可以像 Getter 一样访问其他的 Store，同上方式使用其它 Store，这里不在赘述,详细请移步 官方文档 Actions
Pinia 相比 Vuex 更加简单，而且 Pinia 可以自由扩展 官方文档 Plugins
Pinia 是符合直觉的状态管理方式，让使用者回到了模块导入导出的原始状态，使状态的来源更加清晰可见
Pinia 的使用感受类似于 Recoil ，但没有那么多的概念和 API，主体非常精简，极易上手（Recoil 是 Facebook 官方出品的用于 React 状态管理库，使用 React Hooks 管理状态）
Pinia 2 目前还在 Beta 状态，不建议在生产环境中使用，不过相信稳定了以后会成为 Vue 生态中另一大状态管理方案
③ vue项目中常用到哦，不看看吗
现在没用过vue框架，都不好意思说自己是干前端呢，当然这句话并不是说干前端非得会vue,只是想说明他的火爆程度，现在连小程序都推出了mpvue，你确定你还不赶紧了解了解vue吗，我这篇文章的内容都是些很基础的vue知识，后续会补上
解析 ：
- beforecreate ：可以在这加个loading事件
- created ：在这结束loading，还做一些初始化，实现函数自执行
- mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
- * beforeDestory * : 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容
其中key为对象里面的键，value为对象里面的值，其本意就是动态改变原来已经固定的值值，就需要使用vue.set(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)
解析
遍历后{{parent.name}}的已经固定了，这时候点击编辑按钮，改变里面的值，虽然后台数据已经发生了改变，但那时页面渲染的效果并不会发生改变，这时候要想改变页面上的值，就需要使用vue.set(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)，
在空的数组中不能使用push传入数据，所以应当使用vm.$set给数组添加
** 使用v-bind动态给元素绑定
这样可以在遍历的时候给不同的元素动态绑定不同id
在下次dom更新循结束之后延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom
在vue中获取当前点击的元素对象，在点击的方法里 传 入$event,然后在methods方法里面接受传过来的值，具体如 下
这个指令保持在元素上直到关联实例结束编译 /，可隐藏为编译的标签直到实例准备完毕
computer也是一个对象，类似于methods,在里面也可以定义很多方法。计算属性的结果会被缓存，写法如下：
前一兄弟元素必须有v-if 或v-else-if
前一兄弟必须有v-if或v-else-if
vue包含一组观察数组的变异方法，所以它们也会出发视图更新
由于javascript的限制，Vue不能检测一下变动的数组
对于已经创建实例，vue不能动态添加根级别的响应式属性，但是可以使用Vue.set( object, key, value )方法嵌套对象添加响应式属性
props可以是数组或对象，用于接收来父组件的数据，或者使用对象作为替代
1.axios.post('url', {data} )
.axios发送跨域请求
var headers ={
'headers':{
'Content-Type':' application/x-www-from-urlencoded'
}
}
axios.$http.post('url', {data},设置请求头)
axios发送post请求时传过去的数据格式不是formate格式。从而获取不到后台传过来的数据
解决办法：在页面中引入qs模块
import qs from'qs';
axios.interceptors.request.use((config)=>){
config.date=qs.stringify(config.data);
returnconfig;
}
私有过滤器是将过滤器中的方法直接绑定到当前Vue实例上面，所以只能在当前托管区域中使用
全局过滤器相当于是将过滤器中的方法绑定到Vue构造函数的原型中，可以保证每一个Vue实例的托管区域都可以使用
vm在很多时候，页面还未加载出来，不能使用vm，这时我们有两种解决方法
访问在线试听
如果项目数据过多的话，直接管理是非常不方便的，这时候就应该采用vuex,Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用所有的组件的状态
mui中的区域滚动组件，有个默认阻止冒泡事件，这时候在vue中使用click事件就会无法触发，具体做法是把click事件改为tap事件,只有区域滚动事件click事件才无法生效
vue中的get传参
axios.get(url,{params:{'aa':hello,'bb':''}})
我把图片的id都放入数组，让然后传给你，你再传给我过滤后的图片信息，然后你让我通过自己创建的数组里面的id来对你传过来的图片信息进行处理，可是我自己创建的数组会随着不同按钮而发生改变，
const arr1=[12,23,45,12,45];
const arr2=[12:'你好',23:'是吗',45:'算了']
for(let i arr1){
vm.$set(arr2,i,arr2[arr2[i]]);
}
这样得到的arr2 =[12:'你好'，23:'是吗'，45:'算了'，12:'你好'，45:'算了']
var a=[1,2,3,4,5,6,];
var b=a.filter((value,index)=>{
value:当前数组对应的值
index:当前值对应的索引
returnindex！=2;
})
在vue中
import Vue from ‘vue’ //es6写法
import App from ‘./App’
父子组件的通信：emit
非父子组件之间的通信：event bus
复杂情况：vuex
④ VUE vux深入浅出
Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
② 能够高效地实现组件之间的数据共享，提高开发效率
③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步
一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可
State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。
组件访问 State 中数据的第一种方式：
this.$store.state .全局数据名称
组件访问 State 中数据的第二种方式：
Mutation 用于变更 Store中 的数据。
只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
可以在触发 mutations 时传递参数：
this.$store.commit() 是触发 mutations 的第一种方式
触发 mutations 的第二种方式：
Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发
Mutation 的方式间接变更数据
触发 actions 异步任务时携带参数：
this.$store.dispatch() 是触发 actions 的第一种方式
触发 actions 的第二种方式：
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
Store 中数据发生变化，Getter 的数据也会跟着变化。
使用 getters 的第一种方式： this.$store.getters.名称
使用 getters 的第二种方式：
mutations 是操作 state 数据的方法的集合，比如对该数据的修改、增加、删除等等。
mutations 方法都有默认的形参：
([state] [,payload])
而在组件中，我们需要这样去调用这个mutation——例如在App.vue的某个method中:
在实际生产过程中，会遇到需要在提交某个 mutation 时需要携带一些参数给方法使用。
单个值提交时:
当需要多参提交时，推荐把他们放在一个对象中来提交:
接收挂载的参数：
另一种提交方式
context ：上下文(相当于箭头函数中的this)对象
payload ：挂载参数
组件内调用模块a的状态：
而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法：
模块中 mutations 和 getters 中的方法接受的第一个参数是自身局部模块内部的 state
actions 中方法获取局部模块状态是 context.state ,根节点状态是 context.rootState
如果把整个 store 都放在 index.js 中是不合理的，所以需要拆分。比较合适的目录格式如下：
对应的内容存放在对应的文件中，和以前一样，在 index.js 中存放并导出 store 。 state 中的数据尽量放在 index.js 中。而 moles 中的 Astore 局部模块状态如果多的话也可以进行细分。
⑤ 我把vue3项目中的vuex去除了，改用 pinia
pinia 目前已经是 vue 官方正式的状态库。适用于 vue2 和 vue3，本文只描述vue3的写法。
相对于以前的 vuex，pinia具有以下优势
创建一个 pinia 并传递给 vue 应用
store的定义是通过 defineStore 这个函数，
它需要一个唯一的名称，该名称可以作为第一个参数传递，也可以用 id 熟悉传递。
该 id 是必要的，主要是用于 vue devtools
上述代码中，useMainStore实例化后的，我们就可以在 store 上访问 state、getters、actions 等（pinia中没有mutations）。
该 store 是一个 reactive 对象，所以不需要 “.value”，也不能对其进行解构使用，否则失去响应性（类似 props）。
如果一定要对其进行解构使用，可以使用 storeToRefs ，类似 vue3 中的 toRefs
在 pinia 中，定义 state 是在函数中返回 state 初始状态
可以通过store 实例直接访问
也可以直接修改状态
虽然可以直接修改，但是出于代码结构来说，全局的状态管理还是不要直接在各个组件处随意修改状态，应放于 action 中统一方法修改（没有mutation了）
可以通过调用store 上的方法将状态重置为初始状态
修改state还可以通过使用 $patch 方法
$patch 可以同时修改多个值，举个例子
但是，这种写法的在修改数组时，例如我只想要把 userList 的中第一项"小明"的age 改为 20，也需要传入整个包括所有成员的数组，这无疑增加了书写成本和风险，于是一般都推荐使用以下的传入一个函数的写法
通过 store.$subscribe() 的方法，
该方法的第一个参数接受一个回调函数，该函数可以在 state 变化时触发
如上所示，该回调函数的两个参数
其中 state 是 mainStore 实例，而 mutation 打印如下
可以发现，打印结果的mutation对象主要包含三个属性
上面代码中，调用mainStore.$subscribe返回的值（即上方示例的 subscribe 变量）可以停止订阅
store.$subscribe() 的方法的第二个参数options对象，是各种配置参数，包括
detached属性，其值是一个布尔值，默认是 false， 正常情况下，当 订阅所在的组件被卸载时，订阅将被停止删除，如果设置detached值为 true 时，即使所在组件被卸载，订阅依然可以生效。
其他属性主要还有 immediate、deep、flush 等等，和 vue3 watch的对应参数效果一样。
getter 是 store 中的 state 计算值，以defineStore中的 getters 属性定义
getters属性的值是一个函数，该函数的第一个参数是 state
上面代码中，getters的值是箭头函数，当getters的值是普通函数时，可以通过 this 访问整个store实例（如下）
但是如果是普通函数，想要通过 this 获取state的值并希望this的类型能正确推断，同时希望函数的返回值类型正确推断，我们需要声明函数的返回类型。
action 是 store 中的 方法，支持同步或异步。
action 定义的函数可以是普通函数从而可以通过 this 访问整个store实例，同时该函数可以传入任意参数并返回任何数据
通过 store.$onAction() ，可以监听action的动作及结果等
该函数可以接收一个回调函数作为参数，回调函数的参数中有五个属性，具体如下
举个例子，
首先，定义一个store
然后在 setup 中使用
如上，在 setup 中，调用了 subscribeNormal 函数后，页面打印如下
调用了 subscribeError 函数后，页面打印如下
同样，可以通过调用 mainStore.$onAction 返回的值来手动停止订阅，在上面代码的例子中，即是
store.$onAction 默认在所在组件卸载时会被自动删除，可以通过传递第二个参数 true，来将action订阅和所在组件分开（即组件卸载时，订阅依然有效）
在组件中使用时，useStore() 在大多数情况下都可以在调用后开箱即用。
在其他地方使用时，需确保在 pinia 激活使用后（ app.use(createPinia()) ）才能使用 useStore()
例如在路由守卫中
在store中也可以访问其他store
pinia store 支持扩展，通过 pinia 插件我们可以实现以下
例如可以写一个简单的插件来给所有store添加一个静态属性
然后，在所有其他的store都可以访问到上面添加的 env 属性
从上方代码可以发现，pinia 插件是一个函数，这个函数有一个可选参数
context 打印出来主要有
通过 context 我们可以在 store 上设置属性
这样，在所有其他的store都可以访问到上面添加的 env 属性
pinia 的 store 是通过 reactive 包装的，可以自动解包它包含的任何 ref 对象
通过上面插件，访问store 的 env 时不需要 .value，就可以直接访问
当需要添加来自其他库或不需要响应式的数据时，应该用 markRaw() 包装传递的对象，例如
markRaw 来自 vue3，可以标记一个对象，使其永远不会转换为 proxy。返回对象本身。
当通过插件添加新属性时，可以扩展 PiniaCustomProperties 接口
可以用设置get，set或者简单声明值的类型，以此来安全地写入和读取新加的属性
⑥ vue如何使用vuex，vuex是vuex.js文件吗
vue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如：代码热更新，修改代码之后网页无刷新改变，对前端开发来说非常的方便PostCss，再也不用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是绝对的好东西，不过有些地方的代码校验有时候也挺麻烦的-.-bable，ES2015出来已经有一段时间了，但是不少浏览器还没有兼容ES6.有了bable，放心使用ES6语法，它会自动转义成ES5语法。Stylus，类似于SASS/SCSS，但是可以不写{}和“：”，使用起来还是很方便的…除此之外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只需要一个命令就可以搞定，非常的方便开发vue非常好的融合了react的组件化思想和angular的指令思想。一个vue的组件将HTML、CSS、JS代码写在一个文件里面，这样既方便编写，也方便管理和修改Axios在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里：axios.get(url).then((res)=>{this.data=res.data})Vuexvue提供了一个数据管理工具vuex，有点类似于angular中factory和service，可以进行数据上的通信。比如存储一些公共变量或者是不同组件间的数据处理等。这个有一些高级用法在这里不细说，想要了解的可以去官方文档看，有中文版本。conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}})Vue-Routervue-router是vue的路由系统，可以用来创建单页应用。基本思想是在主页面中引入标签，然后定义路由，把router挂在到app上，然后把各个子页面渲染到view里面。使用起来还是很方便的，跳转页面只需要router.push('test')获取元素节点vue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如testjscodethis.$ref.testHook组件间的通信一。如果是和子组件通信，则使用ref就可以实现，如：jscodethis.$ref.testHook.add()//调用test子组件的add方法二。使用emit来发送广播vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。使用方法如下：比如想要给test组件发送一个“相加”广播:exportdefault{method:{click(){Vue.$emit('add',{})//第二个参数可作为传递数据传送到监听端口，不需要则传空对象}}}那么test组件中就需要监听，在created方法里写exportdefault{created(){Vue.$on('add',this.add)},method:{add(){this.count++}}}除了以上总结的这点小的知识点以外，还有很多vue的知识想要和大家分享，以后会陆续写出来，大家感兴趣的也可以来我的GitHub一起来写这个项目（觉得不错的给个starHah）
⑦ 移动端或者vue里有什么插件可以存储更多的数据，除了本地存储localstorage
网页链接
websql
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
⑧ 使用vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析
vue有自己的脚手架构建工具vue-cli,使用起来非常方便，使用webpack来集成各种开发便捷工具，比如：
代码热更新，修改代码之后网页无刷新改变，对前端开发来说非常的方便
PostCss，再也不用去管兼容性的问题了，只针对chrome写css代码，会自动编译生成支持多款浏览器的css代码
Eslint，统一代码风格，规避低级错误，对于有代码洁癖的人来说是绝对的好东西，不过有些地方的代码校验有时候也挺麻烦的-.-
bable，ES2015出来已经有一段时间了，但是不少浏览器还没有兼容ES6.有了bable，放心使用ES6语法，它会自动转义成ES5语法。
Stylus，类似于SASS/SCSS，但是可以不写{}和“：”，使用起来还是很方便的
…
除此之外，vue-cli已经使用node配置了一套本地服务器和安装命令等，本地运行和打包只需要一个命令就可以搞定，非常的方便
开发
vue非常好的融合了react的组件化思想和angular的指令思想。 一个vue的组件将HTML、CSS、JS代码写在一个文件里面，这样既方便编写，也方便管理和修改
Axios
在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。
使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里：
axios.get(url).then((res)=>{
this.data = res.data
})
Vuex
vue提供了一个数据管理工具vuex，有点类似于angular中factory和service，可以进行数据上的通信。 比如存储一些公共变量或者是不同组件间的数据处理等。
这个有一些高级用法在这里不细说，想要了解的可以去官方文档看，有中文版本。
复制代码
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
axios.get(url).then((res)=>{
this.data = res.data
})
复制代码
Vue-Router
vue-router是vue的路由系统，可以用来创建单页应用。基本思想是在主页面中引入标签，然后定义路由，把router挂在到app上，然后把各个子页面渲染到view里面。使用起来还是很方便的， 跳转页面只需要
router.push('test')
获取元素节点
vue2.0废除了v-el指令，所有的节点指令修改为ref，然后通过ref来获取元素节点，如
<div ref="testHook">test</div> ...js code this.$ref.testHook
组件间的通信
一。如果是和子组件通信，则使用ref就可以实现，如：
<test ref="testHook"></test>
...js code
this.$ref.testHook.add() //调用test子组件的add方法
二。使用emit来发送广播
vue2提供了一套广播机制，即一边发送广播，一边接收广播来执行相应操作。使用方法如下：
比如想要给test组件发送一个“相加”广播:
复制代码
export default {
method:{
click(){
Vue.$emit('add',{}) //第二个参数可作为传递数据传送到监听端口，不需要则传空对象
}
}
}
复制代码
那么test组件中就需要监听，在created方法里写
复制代码
export default {
created(){
Vue.$on('add',this.add)
},
method:{
add(){
this.count++
}
}
}