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>
目录
相关文章
|
6月前
|
JavaScript 中间件 网络架构
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(一)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
6月前
|
存储 JavaScript API
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(三)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
24天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
119 0
|
3月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
112 0
Vue项目打包后都产生了哪些JS请求?
|
3月前
|
JavaScript
注意!Vue.js 或 Nuxt.js 中请停止使用.value
注意!Vue.js 或 Nuxt.js 中请停止使用.value
|
4月前
|
JavaScript
Eslint.js文件Vue中没有,如何修改配置
Eslint.js文件Vue中没有,如何修改配置
|
JavaScript 前端开发
Vue.js组件的重要选项
Vue.js组件的重要选项
66 0
|
6月前
|
JavaScript 开发工具 git
Vue.js 目录结构
Vue.js 目录结构
|
6月前
|
存储 JavaScript 中间件
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(二)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
6月前
|
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跳转不了路由的问题
206 0
下一篇
无影云桌面