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>
目录
相关文章
|
传感器 网络协议 Ubuntu
MQTT协议与EMQ
MQTT协议与EMQ
335 0
|
移动开发 监控
表格中有WKWebView底部有空白问题及解决方案优缺点
表格中有WKWebView底部有空白问题及解决方案优缺点
177 0
|
数据可视化 Java 数据库
回顾 2023,NebulaGraph 的这一年的变化
在整体上,从 v3.3.0 到 v3.6.0,NebulaGraph 的稳定性有了明显的提升;而最新的发行版 v3.6.0 版本,在性能上,针对图上常用的路径查询、多跳查询上,均有不同程度的性能提升,最高提升了 6 倍。
180 0
回顾 2023,NebulaGraph 的这一年的变化
|
安全 网络安全 数据安全/隐私保护
网络安全漏洞与信息安全:保护您的数字身份
【8月更文挑战第31天】 在数字化时代,个人信息和数据安全成为每个网民必须面对的现实问题。本文旨在揭示网络安全漏洞的成因、加密技术的应用以及提升个人安全意识的重要性,以期帮助读者构筑起一道坚固的数字防线。通过深入浅出的分析,我们将一同探索如何在网络世界中保持警觉,守护好我们的虚拟背影。
92 0
|
Web App开发 前端开发 JavaScript
谷歌浏览器chrome神级插件推荐
谷歌浏览器chrome神级插件推荐
|
存储 资源调度 JavaScript
2024轻松学会 Vue 框架:Vue 框架快速入门指南(四)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(四)
|
存储 数据采集 网络协议
【网络】socket套接字编程
【网络】socket套接字编程
|
安全 应用服务中间件 Linux
1安装虚拟机 靶场以及漏洞环境——docker
安装虚拟机 靶场以及漏洞环境——docker
1安装虚拟机  靶场以及漏洞环境——docker
|
存储 Java API
深入了解ElasticSearch的Nested数据类型
ElasticSearch中可以将数据以对象的方式存储并查询,但是ES底层的Lucene 没有内部对象的概念,因此如果通过默认的方式往ES中插入对象,ES会将对象层次结构扁平化为字段名称和值的简单列表。 比如下面这一段数据: