Yêu cầu Dec 5th, 2019 6:44 a.m. 1417 0 2
  • 1417 0 2
0

Làm thế nào để sử dụng sessionStorage trong Vuejs?

Chia sẻ
  • 1417 0 2

Khi em load trang lên trong session có dữ liệu nhưng lần đầu load thì e không dùng dữ liệu trong session được. Khi e refresh lại trang thì dữ liệu trong session mới được load cho em hỏi làm thế nào mình có thể lấy dữ liệu ngay từ đầu đựơc ạ.?

2 CÂU TRẢ LỜI


Đã trả lời Dec 5th, 2019 6:51 a.m.
Đã được chấp nhận
0

Cụ thể là bạn lưu session như thế nào vậy? theo mình đoán bạn đang gặp vấn đề về bất đồng bộ

Chia sẻ
Avatar Pin Vu @pinpolygons
Dec 5th, 2019 6:57 a.m.

Screen Shot 2019-12-05 at 13.54.31.png Đây là code mình lưu dùng để lưu session

Dec 6th, 2019 1:15 a.m.

@pinpolygons đoán không sai mà :v thế này nhé, ý tưởng về cấu trúc store của bạn đang bị sai rồi. Khi 1 ứng dụng vue được render thì store phải là cái gọi API lấy dữ liệu và phải là cái được gọi đầu tiên.

Action của store được dùng để gọi API lấy dữ liệu

Mutation được dùng để set state

Còn State để lưu dữ liệu dùng chung trên Components.

Đoạn gọi API set storage các kiểu kia, bạn bê nó vào trong action cho mình, nhớ đặt async await vì đây là lời gọi API nên nó sẽ gây ra bất đồng bộ, tức là code render chạy trước trong khi API chưa trả về dữ liệu kịp, nên cần có async await để code render "chờ" dữ liệu trả về đã

Cuối cùng bạn xem tiếp cho mình hàm: asyncData() , trong hàm asyncData này bạn cắt cái câu $store.dispatch() chứa lời gọi API ở trên vào cho mình

Đây là hàm dùng để fetch dữ liệu khi load trang, chứ chúng ta không dùng created() được.

Avatar Pin Vu @pinpolygons
Dec 6th, 2019 2:18 a.m.

Thanks bạn để mình là thử 😃))

Avatar Pin Vu @pinpolygons
Dec 6th, 2019 2:21 a.m.
Avatar Pin Vu @pinpolygons
Dec 6th, 2019 3:52 a.m.

Mình hiểu là trước khi nó khởi tạo Vue instance nó sẽ gọi store, route, các thứ trước. Bây giờ mình muốn lấy dữ liệu từ server trước rồi mới khởi tạo vue-i18n. mình nên làm như thế nào?

Đã trả lời Dec 5th, 2019 6:50 a.m.
+1

không biết lấy data từ sessionStorage thế này đúng không:

data: {
    vi: {}
},
created () {
    this.vi = window.sessionStorage.getItem('vi')
}

Chia sẻ
Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:00 a.m.

mình lấy đa ta từ api của axios r mình dùng json.stringtify(res.data) để lưu dữ liệu vào session

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:06 a.m.

@pinpolygons call API xong bạn lưu data vào state ấy đồng thời lưu cả vào sessionStorage, xong cứ thế dùng state thôi. Lần thứ 2 vào lại trang kiểm tra session tồn tại key có hay không để gán state cần thiết nếu không có thì lại call API

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:08 a.m.

À bạn bỏ beforeCreate đi check điều kiện các thứ bên trong cùng với created () ấy

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:08 a.m.

@quanghung97 mình dùng session để lấy dữ liệu cho ngôn ngữ từ database mình gọi session trong vue-í18n

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:11 a.m.

mình load page lần đầu kiểm tra trong storage thì có dữ liệu nhưng khi mình lấy dữ liệu dùng thì phải refresh lại trang dữ liệu mới hiển thi. khôn biết lỗi chổ nào nữa

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:17 a.m.

@pinpolygons cái này chỉ có xem source code cả store của vuex, data state của App.vue thì đoán được lỗi.

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:18 a.m.

Screen Shot 2019-12-05 at 13.54.31.png gọi hàm này mình không dùng vuex mình chỉ dùng axios lấy dữ liệu rồi lưu trực tiếp vào session thôi

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:24 a.m.

@pinpolygons async await cả cái created () thử có khá được không

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:26 a.m.

vẫn null nhưng refresh lại trang thì ok

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:32 a.m.

@pinpolygons vậy test thử async await cục beforeCreate(). Cái này bất đồng bộ, nó lưu storage sau khi render được trang

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:35 a.m.

mình thử hết rồi vẫn báo null

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:38 a.m.

@pinpolygons báo chỗ nào null phần console.log(sess....) trong created ấy hả

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:39 a.m.

Đúng rồi bạn hàm beforceCreate sẽ run trước nên mình console.log ra xem thử thằng thì nó báo null

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:45 a.m.

@pinpolygons vậy bạn bỏ beforeCreate() đi nhét 2 cái dòng bên trong nó xuống created() và sử dung

 async created () {
await ...
await ...

console.log( chỗ này nó báo gì )
}
Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:45 a.m.

nó báo null

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:46 a.m.

bạn có muốn xem thử app không teamView đi

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:47 a.m.

@pinpolygons công ty nghiêm cấm cài teamview bạn ạ =))

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:49 a.m.

à... tại mình đang làm web đa ngôn ngữ bản dịch ngôn ngữ mình load từ database mình lưu trong sessionStorage bây giờ mình chỉ cần console log ra dữ liệu thì web mình mới có data của 2 ngôn ngữ

Avatar WheeBoo @quanghung97
Dec 5th, 2019 7:56 a.m.

@pinpolygons thông thường nội dung đa ngôn ngữ tiêu đề, header, footer, button được lưu dạng Json, nội dung bài viết cũng đa ngôn ngữ mới chơi kiểu lôi ra từ DB mà

Avatar Pin Vu @pinpolygons
Dec 5th, 2019 7:58 a.m.

Tại sếp mình muốn vậy á. Chứ mà kiểu JSON kia thì đã xong từ bao giờ rồi 😪😔😔😔

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí