又仔細(xì)看了一遍vuex的文檔，還是云里霧里的，不過(guò)至少明白它是一個(gè)專門管理狀態(tài)的，根據(jù)數(shù)據(jù)狀態(tài)的改變可以驅(qū)動(dòng)視圖更新，既然是這樣那至少登錄注冊(cè)是一種狀態(tài)，就用登錄來(lái)做測(cè)試，學(xué)習(xí)vuex,不過(guò)話說(shuō)回來(lái)，既然專門管理狀態(tài)，那我至少要仔細(xì)推敲一下這個(gè)learn的學(xué)習(xí)項(xiàng)目有那些狀態(tài)邏輯。

1、據(jù)說(shuō)儲(chǔ)存的vuex store里面的狀態(tài)是臨時(shí)的，右鍵刷新一下頁(yè)面這些狀態(tài)就銷毀了（這是據(jù)說(shuō)，請(qǐng)大神解惑我也沒(méi)辦法證實(shí)），如果是這樣的話，我的用戶狀態(tài)user還是應(yīng)該要寫入sessionStorage，不然登錄了的一刷新頁(yè)面就變成沒(méi)登錄了，用戶不就瘋了啊。所以store里面的user狀態(tài)應(yīng)該要從sessionStorage里面去讀。

2、在這個(gè)learn項(xiàng)目中現(xiàn)存的頁(yè)面中，home,paroducts,FAQ，login，regin，應(yīng)該是不需要登錄就可以訪問(wèn)，而manger和manger以下的子頁(yè)面是必須要登錄才可以訪問(wèn)的。

3、比較特殊的是login和regin，如果用戶已經(jīng)登錄了，再去訪問(wèn)這2個(gè)頁(yè)面，原則上來(lái)說(shuō)也是可以的，但如果已經(jīng)登錄了，再用其它賬號(hào)來(lái)登錄一次，那sessionStorage存在2個(gè)user數(shù)據(jù)，那就顯然不合理了，所以應(yīng)該規(guī)定，如果用戶已經(jīng)登錄，又去訪問(wèn)login或者regin，那我們應(yīng)先remove掉sessionStorage里面user數(shù)據(jù)

4、vuex規(guī)定所有狀態(tài)的改變只能依靠mutation，而要驅(qū)動(dòng)mutation去改變狀態(tài)的只能是action。那在這個(gè)項(xiàng)目里登錄狀態(tài)變化只會(huì)有登錄、注冊(cè)和登出這三種情況，登錄和注冊(cè)成功的時(shí)候要去執(zhí)行一個(gè)存在user的action，登出的時(shí)候去執(zhí)行一個(gè)不存在user的action。

5、vuex官方還提了一個(gè)getter的玩意兒，我感覺(jué)應(yīng)該是在我們需要取用store里面狀態(tài)的時(shí)候，確切的說(shuō)應(yīng)該是取出這個(gè)狀態(tài)之后，給這個(gè)狀態(tài)做一些加工改變用的，而且應(yīng)該只能getter一次吧，多了感覺(jué)要亂套?。ú恢肋@個(gè)想法對(duì)不對(duì)），但看見(jiàn)這樣的寫法this.$store.getters.doneTodosCount，感覺(jué)應(yīng)該可以用不止一次把。估計(jì)我想得有點(diǎn)多了，目前看起來(lái)也用不上，也許要經(jīng)歷過(guò)需要的應(yīng)用場(chǎng)景才能理解透徹把。

6、還有個(gè)module，這個(gè)就有點(diǎn)迷了，沒(méi)太搞懂，先不管了

預(yù)想中store的登錄狀態(tài)還是要從sessionStorage來(lái)取的，所以我先把路由約束好，那些頁(yè)面需要user，那些不需要，訪問(wèn)那些頁(yè)面需要remove user

打開main.js

添加代碼

// 這個(gè)官方名字叫導(dǎo)航守衛(wèi)，挺形象的
router.beforeEach((to, from, next) => {
 // 如果是去登錄或注冊(cè)，那就先把user移除
 if (to.path === '/login' || to.path === '/regin') {
  sessionStorage.removeItem('user')
 }
 let user = JSON.parse(sessionStorage.getItem('user'))
 if (!user && (to.path === '/manger/my' || to.path === '/manger/send' || to.path === '/manger/history')) {
  next({ path: '/login' })
 } else {
  next()
 }
})

這樣寫感覺(jué)怪怪的，不知道有沒(méi)有簡(jiǎn)單點(diǎn)的寫法？

不過(guò)想要的效果是能達(dá)到的

然后嘗試寫store

先寫個(gè)基本結(jié)構(gòu)

然后一步一步具體寫

是說(shuō)這需要一個(gè)function?

唉喲，不對(duì)，我蠢了，這是賦值（不知道說(shuō)賦值準(zhǔn)不準(zhǔn)確）嘛，又不是寫一個(gè)obj對(duì)象，不需要逗號(hào)的哈

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 創(chuàng)建基本狀態(tài)
const state = {
 // 登錄狀態(tài)為沒(méi)登錄
 logined: false,
 // 用戶信息數(shù)據(jù),目前只需要avatar和name,還是把username也加上吧
 LoginedUser: {
  name: '',
  avatar: '',
  username: ''
 }
}
// 創(chuàng)建改變狀態(tài)的方法
const mutations = {
 // 改變狀態(tài)的方法也需要2個(gè)，一個(gè)是登錄或注冊(cè)了，一個(gè)是登出了
 // 這里不能寫箭頭函數(shù)???
 // 登錄
 LOGIN (state) {
  // 先讓登錄狀態(tài)變?yōu)榈卿浟?
  state.logined = true
  // 然后去sessionStorage取用戶數(shù)據(jù)
  let user = JSON.parse(sessionStorage.getItem('user'))
  // 再把用戶數(shù)據(jù)發(fā)下去
  state.LoginedUser.name = user.name
  state.LoginedUser.avatar = user.avatar
  state.LoginedUser.username = user.username
 },
 // 登出
 LOGOUT (state) {
  // 這個(gè)同理
  state.logined = false
  state.LoginedUser.name = ''
  state.LoginedUser.avatar = ''
  state.LoginedUser.username = ''
 }
}
// 創(chuàng)建驅(qū)動(dòng)actions可以使得mutations得以啟動(dòng)
const actions = {
 // 這里先來(lái)一個(gè)驅(qū)動(dòng)LOGIN的東西就叫l(wèi)ogin吧
 // 這個(gè)context是官方寫的，應(yīng)該叫什么無(wú)所謂
 login (context) {
  context.commit('LOGIN')
 },
 // 同樣來(lái)個(gè)logout
 logout (context) {
  context.commit('LOGOUT')
 }
}

export default new Vuex.Store({
 state,
 mutations,
 actions
})

我感覺(jué)應(yīng)該就這樣就可以了吧，還是要測(cè)試一下

不對(duì)還應(yīng)該要把a(bǔ)ction掛到該掛的地方，然后該引用store狀態(tài)的地方引用store的數(shù)據(jù)

先去登錄頁(yè)面掛action

應(yīng)該是這樣的，注冊(cè)也是一樣

然后是登出的頁(yè)面

header.vue

同時(shí)我們就不在創(chuàng)建頁(yè)面的時(shí)候從sessionStorage取數(shù)據(jù)了

還有一個(gè)main.js

要是不能在main.js里面生效還真是麻煩啊，試想一下，已登錄用戶直接去了/login頁(yè)面，seeionStorage里面用戶數(shù)據(jù)清除了，但store里面的數(shù)據(jù)又沒(méi)更新，那在頭部不是還掛一個(gè)頭像啊???

還有一步獲取store里面的數(shù)據(jù)

header.vue

還是趕緊測(cè)試一下吧

哭了.....直接四個(gè)錯(cuò)誤

這我都是照著官方說(shuō)的寫的啊

把header.vue的數(shù)據(jù)注釋掉，還有一個(gè)錯(cuò)誤

但這個(gè)dispatch 是undefined 是啥意思啊，我是照著寫的啊，大佬幫我解惑一下啊

把dispatch 改成context 也不行

改成commit 試一下

還是一樣沒(méi)脾氣了，我再去看看資料吧

研究了好久解決了一部分問(wèn)題

首先我把store.js，里面的action寫成了這樣

但我覺(jué)得原來(lái)的寫法也沒(méi)有錯(cuò)

然后在main.js里面注釋掉了這句

然后就正常了，dispatch是正確的，所以我所擔(dān)心的事果然發(fā)生了

先去登錄

可以看見(jiàn)header右上方的確立刻變成了用戶信息，達(dá)到了要求，然而我要是自己去地址欄輸入/login

跳到了登錄頁(yè)面，但頭像真的還掛在右上角........，說(shuō)明store里面真的還是登錄的數(shù)據(jù)，雖然仔細(xì)想想其實(shí)這并沒(méi)有什么影響，他要是再一次登錄成功，數(shù)據(jù)自然也就變了，而且一般沒(méi)人會(huì)這么去訪問(wèn)登錄頁(yè)面，但心里覺(jué)得這樣不對(duì)啊。

而且我覺(jué)得這個(gè)action的分發(fā)應(yīng)該有辦法寫在main.js里面的，不知道有沒(méi)有大神指點(diǎn)一二！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論