为什么Nuxt Js商店不能与vue.js一起工作？

Question

我在vue.js存储中这样写代码，但是在nuxt.js vuex存储中，为什么这不起作用？

  

my / store / index.js文件

import Vue from "vue"
import Vuex from "vuex"
import branch from "./branch.module"
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
    branch
  }
})

  

my / store / branch.module.js

import axios from "axios"
import { All_BRANCH,SEARCH_BRANCH} from "./action.type"
import {SET_BRANCH } from "./mutation.type"
const state = {
  branch: []
};
const getters = {
  allbranches(state){
    return state.branch
  }
};
const actions = {
[All_BRANCH]({commit},page) {
    return new Promise((resolve, reject) => {
        axios
        .post('/api/branches?page=' + page)
        .then(response => {
            // console.log(response)
            commit(SET_BRANCH,response.data)
            resolve(response);
        })
        .catch(function(error) {
            reject(error);
        });
    });
},

const mutations = {
  [SET_BRANCH](state, data)
    {
        state.branch = data.data;
    },
};
export default {
  state,
  actions,
  mutations,
  getters,
};

  

store / action.type.js

export const All_BRANCH = "All_BRANCH"

  

store / mutation.type.js

export const SET_BRANCH = "SET_BRANCH"

  

我的index.vue页面

import { mapState,mapGetters,mapActions } from "vuex"
import { All_BRANCH,DELETE_BRANCH,SEARCH_BRANCH,ALL_USER_ROLE2 } from '@/store/action.type';
export default {
 computed: {
    ...mapGetters(["allbranches"])
  },
}

使用mapGetters获取数据

但是为什么同样的过程在nuxt.js中不起作用？

Answer 1

它在nuxt文档中进行了描述。 https://nuxtjs.org/guide/vuex-store/#classic-mode

您不需要执行vue.use，并且每次都需要导出一个新商店。例如。

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      counter: 0
    }),
    mutations: {
      increment (state) {
        state.counter++
      }
    }
  })
}

export default createStore