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>
目录
相关文章
|
3月前
|
JavaScript 中间件 网络架构
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(一)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
3月前
|
存储 JavaScript API
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(三)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
5月前
|
缓存 JavaScript 前端开发
Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
31 0
|
14天前
|
JavaScript 开发工具 git
Vue.js 目录结构
Vue.js 目录结构
|
5月前
|
JavaScript 前端开发
Vue.js组件的重要选项
Vue.js组件的重要选项
41 0
|
3月前
|
存储 JavaScript 中间件
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(二)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
3月前
|
JavaScript 数据安全/隐私保护 开发者
解决vue引发的报错-sub is not a function at vuex.esm.js:422:1跳转不了路由的问题
解决vue引发的报错-sub is not a function at vuex.esm.js:422:1跳转不了路由的问题
44 0
|
8月前
|
设计模式 存储 开发框架
带你理解Vue.js:轻松创建复杂的SPA
“带你理解 Vue.js:轻松创建复杂的 SPA” 是一篇深入探讨 Vue.js 框架及其在单页应用(SPA)开发中的作用的技术博文。在这篇文章中,我们将跟随尘缘..的脚步,一步步了解 Vue.js 的核心概念,包括它的声明式渲染、组件系统、路由管理、状态管理,以及与其他前端框架的比较。 无论你是刚接触前端开发,还是已经有一定经验的开发者,这篇文章都将为你提供深入而全面的 Vue.js 知识,帮助你轻松地创建复杂的单页应用。
61 1
|
11月前
|
JavaScript
用Pinia.js 来重构一下之前Vuex的一个小Demo
# Pinia Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案 Pinia 支持 Vue2 和 Vue3。 # Pinia的优势 1.Pinia拥有完整的 typescript 的支持; 2. 无mutations,相比Vuex更简单,更容易上手。 3. 自动添加Pinia,无需创建store,简化开发。 4. actions对同步异步支持非常好。 5. 代码分割好,非常优雅便于维护。 # pinia的安装 `npm install pinia --save` # srore/index.ts 先看一下store/index.
|
JavaScript 前端开发
vue中引用第三方js总结
vue中引用第三方js总结
315 0
vue中引用第三方js总结