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

相关文章
|
7月前
|
存储 JavaScript API
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(三)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
7月前
|
JavaScript 中间件 网络架构
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(一)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
7月前
|
分布式计算 JavaScript
JS项目小Tipes总结
JS项目小Tipes总结
|
7月前
|
存储 JavaScript 前端开发
JS项目练习
JS项目练习
|
1月前
|
JavaScript 前端开发 定位技术
Nuxt.js 和 Next.js 差异
Nuxt.js 和 Next.js 差异
|
4月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
134 0
Vue项目打包后都产生了哪些JS请求?
|
4月前
|
JavaScript
注意!Vue.js 或 Nuxt.js 中请停止使用.value
注意!Vue.js 或 Nuxt.js 中请停止使用.value
|
6月前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
108 0
|
7月前
|
JavaScript 开发工具 git
Vue.js 目录结构
Vue.js 目录结构
|
7月前
|
存储 JavaScript 中间件
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(二)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
下一篇
DataWorks