Nuxt.js项目中js文件单独使用Vuex的store

Nuxt.js 项目中使用Vuex和Vue项目中使用略有不同

如果需要再单独的js文件中使用store，需要使用经典模式，不过文档介绍说

此功能已经弃用，将在Nuxt 3中删除。

  
 

  
1
 

总之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;
};
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
 

js文件中使用

import store from "@/store/index.js";

let token = store().getters.getToken;

  
 

  
1
  
2
  
3
 

vue文件中使用

let token = this.$store.getters.getToken;
  
 

  
1
  
2
 

参考
https://zh.nuxtjs.org/guide/vuex-store

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/106495756