JS经典实例网站首页 JS经典实例

nuxt中的store使用

发布时间：2020-06-14 15:00:49编辑：雪饮阅读（429）

Store的使用

首先我们在昨天项目中建立store/index.js并给一个值默认为0，然后提供一个对外接口通过该接口能使得该默认为0的值能被修改

则如

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=()=>new Vuex.Store({
state:{counter:0},
mutations:{
    increment(state){
      state.counter++
    },
    changeCounter(state,num){
      state.counter=num;
    }
}
})
export default store

然后我们要在首页中显示下上面的store存储值

<h2 class="subtitle">
   Nuxt.js project
 </h2>
 {{lunbos}}
 <hr/>
 {{$store.state.counter}}
 <hr/>

然后在id页面中实现store值的改变并显示

<template>
 <div>{{lunbos}}
 <hr/>
   {{$store.state.counter}}
 </div>
 </template>
 
 <script>
   export default {
     validate({params}){
       return /^\d+$/.test(params.id)
     },
     data(){},
     async asyncData({params,app}){
       let lunbos=await app.$axios.get('/api/getthumimages/0');
       return {
         lunbos:lunbos.data.message
       }
     },
     async fetch({app,store}){
       let res=await app.$axios.get('/api/getthumimages/0');
       let len=res.data.message.length;
       store.commit('changeCounter',len);
     }
   }
 </script>
 
 <style scoped>
 
 </style>

则我们重新npm run dev后会发现首页值已然读取成功为默认的0

然后我们去id看看，由于去id修改了值，所以再次显示的值就是修改之后的值了

部署

SSR

这里部署有两种方式，第一种就是npm run build的SSR

当npm run build后直接运行命令npm run start

然后就可以按照提示中的地址访问了，可以看到SSR部署的结果就是localhost直接就能响应内容

SPA

SPA部署时候可以直接不用再次npm run build，因为上面SSR已经执行过一次，可以直接利用。

SPA另外还要在package.json中配置如

{
   "name": "02_middlaware_plugin_pages_id",
   "version": "1.0.0",
   "description": "Nuxt.js project",
   "author": "雪饮 <1509272975@qq.com>",
   "private": true,
   "scripts": {
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
     "start-spa": "nuxt start --spa",
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "precommit": "npm run lint"
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.11.0",
     "@nuxtjs/proxy": "^2.0.0",
     "nuxt": "^2.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
     "eslint": "^4.19.1",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-vue": "^4.0.0"
   }
 }