文章目錄

• • 使用vuex在刷新后保持狀態
  • • 服務端使用到了store需要 額外配置
    • • 在操作相關數據的頁面保存數據到cookie
      • 在store下的actions中再次取出相關數據的頁面保存數據到store
  • 配置自己的路由 及 路由鑒權
  • keepalive

使用vuex在刷新后保持狀態

安裝依賴

yarn add vuex-persistedstate

配置
先在 plugins下新建 localStorage.js

import createPersistedState from 'vuex-persistedstate'export default ({store}) => {createPersistedState({storage: sessionStorage,})(store)}

在nuxt.plugins.js 中配置

plugins: [{ src: '~/plugins/localStorage.js', ssr: false }],

服務端使用到了store需要 額外配置

配置完這些，只能保證store中的數據在客戶端的store使用沒問題，因為是通過sessionStororg(localStorg)來保存的同步，如果在服務端也要使用的store數據，還需要 結合cookie

安裝依賴

yarn add cookie-universal-nuxt

在nuxt.plugins.js 中配置

modules: ['@nuxtjs/axios','cookie-universal-nuxt' // store 狀態持久化],

在操作相關數據的頁面保存數據到cookie

changeNav(index,class_id){if(this.$store.state.activeIndex==index){return }// activeIndex在服務端會使用，先同步到 cookiethis.$cookies.set("activeIndex",index);this.$store.commit("setactiveIndex",index)this.$emit("getArticles",class_id)}

在store下的actions中再次取出相關數據的頁面保存數據到store

export default {// 這是cookie的勾子函數,在頁面強制刷新時觸發,context 是上下文nuxtServerInit(store, context) {let activeIndex = context.app.$cookies.get("activeIndex") || 0store.commit("setactiveIndex", activeIndex)} }

配置自己的路由 及 路由鑒權

新建router文件夾，下新建index.js

// 自定義路由結構 import path from 'path'const resolve = (pagePath) => path.resolve(process.cwd(), `./${pagePath}`)const $routes = [{path: '/ceshi',name: 'ceshi',component: resolve('views/ceshi'),meta: {title: 'ceshi',isKeepLive: false,isToken: false,},// redirect:"/ceshi/bbb",children: [{path: '/bbb',name: 'bbb',component: resolve('views/ceshi/bbb'),meta: {title: 'bbb 主頁',isKeepLive: true,isToken: true,},}]},{path: '/',name: 'default',redirect: "/home",meta: {title: 'default',isKeepLive: false,isToken: false,}},{path: '*',name: '404',component: resolve('layouts/404.vue'),meta: {title: '404',isKeepLive: false,isToken: false,},} ]const extendRoutes = (routes) => {routes.length = 0 // 清除 nuxt 自己生成的路由，這里不要用 空數組 賦值routes.push(...$routes) }export {extendRoutes,$routes }

plugins下新建router.js

// 配置路由攔截 export default ({ app, store }) => {app.router.beforeEach((to, from, next) => {let token=store.state.tokenif(to.meta.isToken && !token){return next("/")}next()})}

nuxt.config.js下配置

import {extendRoutes} from "./router"plugins: [{src:'@/plugins/router' // 路由守衛},]modules: ['@nuxtjs/axios',],build: {transpile: [/^element-ui/]},// 自定義路由 主要是這部分router: {extendRoutes}

keepalive

在 default.vue中配置

<template><div><Nuxt keep-alive :keep-alive-props="{ include: includeArr }" /></div> </template> <script> import { $routes } from "../router/index"; export default {data() {return {names:[]};},methods: {// 專門處理 獲取需要緩存的路由handleNeedToken(routes) {routes.filter((item) => {if (item.children && item.children.length > 0) {return this.handleNeedToken(item.children);}// console.log(item);if (item.meta.isKeepLive === true) {this.names.push(item.name);}});return this.names},},computed: {includeArr() {return this.handleNeedToken($routes);},}, }; </script>

總結

以上是生活随笔為你收集整理的nuxt 中 vuex 路由鉴权 keeplive的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。