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


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

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

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

总之Nuxt.js坑还是很多的，因为一套代码涉及服务器端执行和浏览器端执行，不是很好区分执行代码

实践下来发现还是坑比较多，虽然可以复用Vue的组件模块，不过小型项目还是使用传统的PHP会好一些

修改 store/index.js

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
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文件中使用

1
2
3
import store from "@/store/index.js";

let token = store().getters.getToken;

vue文件中使用

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

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