① 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++
}
}
}