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

相关文章
|
8月前
|
分布式计算 JavaScript
JS项目小Tipes总结
JS项目小Tipes总结
|
8月前
|
存储 JavaScript 前端开发
JS项目练习
JS项目练习
|
8月前
|
存储 JavaScript API
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(三)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
8月前
|
JavaScript 中间件 网络架构
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(一)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
2月前
|
JavaScript 前端开发 定位技术
Nuxt.js 和 Next.js 差异
Nuxt.js 和 Next.js 差异
|
6月前
|
JavaScript
Eslint.js文件Vue中没有,如何修改配置
Eslint.js文件Vue中没有,如何修改配置
|
JavaScript 前端开发
Vue.js组件的重要选项
Vue.js组件的重要选项
76 0
|
8月前
|
JavaScript 开发工具 git
Vue.js 目录结构
Vue.js 目录结构
|
8月前
|
存储 JavaScript 中间件
Nuxt.js:用 Vue.js 打造服务端渲染应用程序(二)
Nuxt.js:用 Vue.js 打造服务端渲染应用程序
|
设计模式 存储 开发框架
带你理解Vue.js:轻松创建复杂的SPA
“带你理解 Vue.js:轻松创建复杂的 SPA” 是一篇深入探讨 Vue.js 框架及其在单页应用(SPA)开发中的作用的技术博文。在这篇文章中,我们将跟随尘缘..的脚步,一步步了解 Vue.js 的核心概念,包括它的声明式渲染、组件系统、路由管理、状态管理,以及与其他前端框架的比较。 无论你是刚接触前端开发,还是已经有一定经验的开发者,这篇文章都将为你提供深入而全面的 Vue.js 知识,帮助你轻松地创建复杂的单页应用。
131 1