Question

我使用vue，typescript来构建我的项目，其中我还使用vue-class-componnet，vue-property-decorator，vuex-class.vue-class-component和vue-property-decorator都可以很好地工作，vuex -class not。总会出现类似“ vuex.esm.js？2f62：993 [vuex]模块名称空间在mapState（）：global /中找不到”的错误，其中global是我的模块状态之一。

首先，我已经导出了我的模块状态，如下所示：

export default {
    namespaced:true,
    state,
    getters,
    mutations,
    actions,
};

并像这样导出我的商店：

const store: Store<any> = new Vuex.Store({

  modules: {
    //添加自定义模块
    user
  }
})

export default store

这根本不起作用。第二，我试图让模块状态写在存储中，


const store: Store<any> = new Vuex.Store({

  modules: {
    user:{
      namespaced:true,
      state:{
        foo:'this is foo'
      },
      getters:{
        getFoo(state){
          return state.foo;
        }
      }
    }
  }
})

没有任何帮助〜发生了相同的错误。

这是我的目录结构：

-src
 -store
  -global
   -index.ts
  -index.ts
 -views
  about.vue

store / global / index.ts：

import { Module, ActionTree, MutationTree, GetterTree } from 'vuex';
import { GlobalState } from './types';
import { RootState } from '../types';

/**
 * state
 */
export const state: GlobalState = {
  version: '1.0.0',
  token: '',
};

/**
 * getters
 */
export const getters: GetterTree<GlobalState, RootState> = {
  getVersion(state: GlobalState): string {
    return state.version;
  },
  getToken(state: GlobalState): string {
    return state.token;
  }
};

/**
 * mutations
 */
export const mutations: MutationTree<GlobalState> = {
  setVersion(state: GlobalState, payload: string) {
    state.version = payload;
  },
  updateToken: (state, payload: string) => {
    state.token = payload;
  }
};

store / index.ts

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { RootState } from './types';
import { global } from './global';

Vue.use(Vuex);
const store: StoreOptions<RootState> = {
  state: {
    version: '1.0.0',
  },
  modules: {
    global,
  }
};
export default new Vuex.Store<RootState>(store);

views / About.vue

<template>
  <div class="demo2">
    <h1>{{txt}}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import Home from './Home.vue';
import { State,Getter,Action,Mutation,namespace } from 'vuex-class';
// import { UserInfo } from '../store/modules/user';
// const namespace = 'global';
const global = namespace('global')
@Component({
  components: {
    Home,
  },
})
export default class About extends Vue {
  //props
  @Prop() private msg!:string
  @Prop() private sum!:number
  //data
  txt:string = 'hhhjj'
  dt:string ='ddd'
  //computed
  get getTxt(){
    return this.txt
  }
  //methods
  private add():void{
    this.sum ++
  }
  //watch 
  @Watch('txt')
  changeTxt(newTxt: string, oldTxt: string){
    console.log(`change txt: ${oldTxt} to ${newTxt}`)
  }
  @State("version") version!:string 
  @global.State("version") globalversion!:string 
  mounted(){
    console.log("version",this.version)
    console.log("globalversion",this.globalversion)
  }
}
</script>

我的package.json：

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.config.js",
    "build:prod-fastLoan": "cross-env env_config=prod webpack --config build/webpack.pro.config.js",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "tep": "node scripts/template"
  },
  "dependencies": {
    "@types/js-cookie": "^2.2.2",
    "autoprefixer": "^9.6.1",
    "axios": "^0.19.0",
    "clean-webpack-plugin": "^3.0.0",
    "core-js": "^2.6.5",
    "cross-env": "^5.2.0",
    "element-ui": "^2.11.1",
    "js-cookie": "^2.2.1",
    "json-server": "^0.15.0",
    "mini-css-extract-plugin": "^0.8.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.0.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.2.1",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.2",
    "webpack-dev-server": "^3.8.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-typescript": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "copy-webpack-plugin": "^5.0.4",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "node-notifier": "^5.4.1",
    "node-sass": "^4.12.0",
    "portfinder": "^1.0.22",
    "sass-loader": "^7.2.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10",
    "webpack-cli": "^3.3.6"
  }
}

但是，也许问题是找不到命名空间，我应该需要在* .d.namespace文件中定义自己的接口？怎么做？我尝试添加以下代码，但没有任何变化：

declare module 'vuex-class' {
  function namespace(k:string):any
}

如果有人可以帮助我解决这个问题，我会很高兴，因为我已经在网站上搜索了很多次解决方案，却一无所获。

Answer 1

我不确定这是否是原因，但可能与之相关。在最新的VueX版本中，您的状态应该是一个函数：

export const state = () : GlobalState => {
  return {
    version: '1.0.0',
    token: '',
  }
}

我已经在模块中添加了namespaced：true，因此vuex类名称空间的属性无法正常工作

1 个答案: