vuex使用
# vuex :狀態(tài)管理器---》存數(shù)據(jù)(變量)的地方，所有組件都可以操作
在Vue中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè)Vue插件，對(duì)vue應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信
<h1>1 vuex的使用 基本使用(操作state的數(shù)據(jù))</h1>
購物車商品數(shù)量：{{ $store.state.num }}
methods:{
handleAdd(){
// 1 直接操作
// this.$store.state.num += 1
// 2 正統(tǒng)方式，通過dispatch觸發(fā)actions
this.$store.dispatch('add',2) //add 必須是action中得函數(shù)
},
add(name) {
//1 直接操作
// this.$store.state.goods.push(name)
//2 正常套路
this.$store.dispatch('addShopping', name)
}
},
export default new Vuex.Store({
state: {
num: 10,
goods: [],
},
mutations: {
mAdd(state,count){
state.num += count
},
addShopping(state, name) {
state.goods.push(name)
}
},
actions: {
// 至少要有一個(gè)參數(shù)，context上下文對(duì)象，觸發(fā)mutations中函數(shù)執(zhí)行，或者直接該state中數(shù)據(jù)都可以
add(context,count){
// 使用commit，觸發(fā)mutations中得函數(shù)
context.commit('mAdd',count) // 會(huì)觸發(fā)mutations中得mAdd的執(zhí)行
},
addShopping(context, name) {
// 這里起ajax請求，檢查name庫存夠不夠
//假設(shè)庫存不夠，彈個(gè)不夠的消息
// alert('庫存不夠了')
// return
context.commit('addShopping', name)
}
},
})
文章來源地址http://www.zghlxwxcb.cn/news/detail-477283.html
Router使用
# 提倡單頁面應(yīng)用，需要做頁面的跳轉(zhuǎn)---->借助于Router實(shí)現(xiàn)頁面組件的跳轉(zhuǎn)
# 1 簡單使用
頁面跳轉(zhuǎn)
寫個(gè)頁面組件
在router--->index.js--->routes數(shù)組中加入一個(gè)路由即可
# 2 組件中實(shí)現(xiàn)頁面跳轉(zhuǎn)
兩種方式
方式一：使用 router-link 標(biāo)簽，to=地址
<router-link to="/about"></router-link>
方式二：js控制
this.$router.push('/about')
# 3 路由跳轉(zhuǎn)時(shí)，可以使用對(duì)象
1 通過對(duì)象跳轉(zhuǎn)路由name形式：<router-link :to="{name:'about'}"></router-link>
2 通過對(duì)象跳轉(zhuǎn)路由path形式：<router-link :to="{path:'/about'}"></router-link>
3 對(duì)象中可以有query屬性，是個(gè)對(duì)象類型，會(huì)把里面的key-value拼到路徑后面
4 在另一個(gè)頁面中取出地址欄中數(shù)據(jù)：console.log(this.$route.query)
5 這種傳遞方式和 3 一樣 <router-link to="/about?name=lqz&age=19">
6 注意區(qū)分：
this.$route：// 對(duì)象 表示當(dāng)前路由對(duì)象，里面有當(dāng)前路徑的地方，攜帶的參數(shù)
this.$router：// 對(duì)象，new VueRouter的鍍錫，它主要用來做路由跳轉(zhuǎn)
#### 例如
console.log(this.$route.query) // 地址欄中的數(shù)據(jù)
console.log(this.$route.query.name)
7 路徑中分割出參數(shù)
配置：
{
path:'/detail/:pk',
name: 'detail',
component: DetailView
},
在路由中取：
this.$route.params.pk
8 路由跳轉(zhuǎn)時(shí)，使用 7 的樣子
<router-link :to="{name:'detail',params:{pk:1}}">
this.$router.push({name:'detail',params:{pk:1}})
# 4 this.router 的一些方法
this.$router.push(path) 相當(dāng)于點(diǎn)擊路由鏈接(可以返回到當(dāng)前路由界面)
this.$router.replace(path): 用新路由替換當(dāng)前路由(不可以返回到當(dāng)前路由界面)
this.$router.back(): 請求(返回)上一個(gè)記錄路由
this.$router.go(-1): 請求(返回)上一個(gè)記錄路由
this.$router.go(1): 請求下一個(gè)記錄路由
多級(jí)路由
# 使用步驟
1 新建一個(gè)頁面組件(XxxView),配置路由
{
path: '/xxx',
name: 'xxx',
component: XxxView,
},
2 在頁面中，想再顯示頁面組件，實(shí)現(xiàn)點(diǎn)擊切換的效果
<h1>lqz頁面</h1>
<router-link to="/xxx/xxx01">
<button>xxx-01</button>
</router-link>
<router-link to="/xxx/xxx02">
<button>xxx-02</button>
</router-link>
<router-view>
# 以后這里變換頁面組件，多級(jí)路由
</router-view>
3 新建兩個(gè)頁面組件 Xxx01.vue Xxx02.vue 配置路由children
{
path: '/xxx',
name: 'xxx',
component: XxxView,
children: [ //通過children配置子級(jí)路由
{
path: 'xxx01', //此處一定不要寫：/xxx
component: Xxx01
},
{
path: 'xxx02',//此處一定不要寫：/xxx
component: Xxx02
}
]
},
路由守衛(wèi)
# 前置路由收文，再進(jìn)入路由之前做判斷
# 寫在router-index.js中，以后訪問任意一個(gè)路由，都會(huì)執(zhí)行這個(gè)代碼
router.beforEach((to,from,next)=>{
console.log('前置路由守衛(wèi)',to,from)
// 要是訪問xxx01，不能跳轉(zhuǎn)
// 如果沒有登錄，不能訪問
if (to.path=='/xxx/xxx01'){
alert('你咩有權(quán)限')
}else{
next() # 繼續(xù)訪問
}
})
路由的兩種工作模式
路由器的兩種工作模式
1 對(duì)于一個(gè)url來說，什么是hash值？--#及其后面的內(nèi)容就是hash值
2 hash值不會(huì)包含在HTTP請求中，即：hash值不會(huì)帶給服務(wù)器
3 hash模式：
地址中永遠(yuǎn)帶著#號(hào) 不美觀
若以后將地址通過第三方手機(jī)app分享，若app校驗(yàn)嚴(yán)格，則地址會(huì)被標(biāo)記為不合法
兼容性較好
4 history模式：
地址干凈 美觀
兼容性和hash模式相關(guān)略差
應(yīng)用部署上線時(shí)需要后端人員支持，解決刷新頁面服務(wù)端404的問題
localstorage、sessionstorage和cookie
# 前端存儲(chǔ)數(shù)據(jù)
登錄成功，有token，存本地
不登錄加購物車
# 前端可以存數(shù)據(jù)的位置：
localstorage:永久存儲(chǔ)，除非你刪除，關(guān)閉瀏覽器，再打開還會(huì)在
sessionstorage：只在當(dāng)前會(huì)話生效，關(guān)閉瀏覽器，就沒了
cookie：有過期時(shí)間，到了過期時(shí)間，自動(dòng)刪除
# 需要借助于第三方 vue-cookies
# cnpm install -S vue-cookies
import cookies from 'vue-cookies'
Vue.use(cookies)
<template>
<div class="home">
<h1>操作localstorage,永久存儲(chǔ)</h1>
<button @click="addLocalstorage">增加</button>
<button @click="getLocalstorage">查</button>
<button @click="deleteLocalstorage">刪除</button>
<h1>操作sessiostorage,當(dāng)前會(huì)話，關(guān)閉瀏覽器</h1>
<button @click="addSessiostorage">增加</button>
<button @click="getSessiostorage">查</button>
<button @click="deleteSessiostorage">刪除</button>
<h1>操作cookie,有過期時(shí)間</h1>
<button @click="addCookie">增加</button>
<button @click="getCookie">查</button>
<button @click="deleteCookie">刪除</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
methods: {
addLocalstorage(){
let userinfo = {name:'lqz',age:19}
localStorage.setItem('userinfo',JSON.stringify(userinfo))
},
getLocalstorage(){
let userinfo = localStorage.getItem('userinfo')
console.log(JSON.parse(userinfo).name)
},
deleteLocalstorage(){
localStorage.clear()
localStorage.removeItem('userinfo')
},
addSessiostorage(){
let userinfo = {'name':'xxx','age':18}
sessionStorage.setItem('userinfo',JSON.stringify(userinfo))
},
getSessiostorage(){
let userinfo = sessionStorage.getItem('userinfo')
console.log(JSON.parse(userinfo).name)
},
deleteSessiostorage(){
sessionStorage.clear()
sessionStorage.removeItem('userinfo')
},
addCookie(){
// 需要借助于第三方 vue-cookies
// cnpm install -S vue-cookies
this.$cookies.set('name','xxx','300s')
},
getCookie(){
console.log(this.$cookies.get('name'))
},
deleteCookie(){
this.$cookies.remove('name')
},
},
}
</script>
文章來源：http://www.zghlxwxcb.cn/news/detail-477283.html
到了這里，關(guān)于Vue——vuex使用、Router使用、localstorage、sessionstorage和cookie的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
