Nuxt.js项目中js文件单独使用Vuex的store

简介: Nuxt.js项目中js文件单独使用Vuex的store

Nuxt.js 项目中使用Vuex和Vue项目中使用略有不同

如果需要再单独的js文件中使用store,需要使用经典模式,不过文档介绍说

此功能已经弃用,将在Nuxt 3中删除。

总之Nuxt.js坑还是很多的,因为一套代码涉及服务器端执行和浏览器端执行,不是很好区分执行代码


实践下来发现还是坑比较多,虽然可以复用Vue的组件模块,不过小型项目还是使用传统的PHP会好一些


修改 store/index.js

import Vuex from "vuex";


const store = new Vuex.Store({
state: () => ({
token: ""
}),

getters: {
getToken(state) {
return state.token;
},
},

mutations: {
setToken(state, token) {
state.token = token;
},

removeToken(state) {
state.token = "";
}
},

actions: {
}
});


// 需要返回一个函数
export default () => {
return store;
};

js文件中使用

import store from "@/store/index.js";
let token = store().getters.getToken;

vue文件中使用

let token = this.$store.getters.getToken;

参考

https://zh.nuxtjs.org/guide/vuex-store

            </div>
目录
相关文章
|
5月前
|
存储 JavaScript API
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(三)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
5月前
|
JavaScript 中间件 网络架构
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(一)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
2月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
74 0
Vue项目打包后都产生了哪些JS请求?
|
2月前
|
JavaScript
注意!Vue.js 或 Nuxt.js 中请停止使用.value
注意!Vue.js 或 Nuxt.js 中请停止使用.value
|
3月前
|
JavaScript
Eslint.js文件Vue中没有,如何修改配置
Eslint.js文件Vue中没有,如何修改配置
|
11月前
|
JavaScript 前端开发
Vue.js组件的重要选项
Vue.js组件的重要选项
64 0
|
5月前
|
JavaScript 开发工具 git
Vue.js 目录结构
Vue.js 目录结构
|
5月前
|
存储 JavaScript 中间件
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(二)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
5月前
|
JavaScript 前端开发
React 创建 js 与 ts 项目
React 创建 js 与 ts 项目
50 0
|
设计模式 存储 开发框架
带你理解Vue.js:轻松创建复杂的SPA
“带你理解 Vue.js:轻松创建复杂的 SPA” 是一篇深入探讨 Vue.js 框架及其在单页应用(SPA)开发中的作用的技术博文。在这篇文章中,我们将跟随尘缘..的脚步,一步步了解 Vue.js 的核心概念,包括它的声明式渲染、组件系统、路由管理、状态管理,以及与其他前端框架的比较。 无论你是刚接触前端开发,还是已经有一定经验的开发者,这篇文章都将为你提供深入而全面的 Vue.js 知识,帮助你轻松地创建复杂的单页应用。
108 1