标签: vuex

错误 [vuex] 未知 getter：计数器/计数`

结构：

商店.js

const state = {
    someRootState: 'someRootState'
}

const getters = {
    getRootState: state => state.someRootState
}

import counter from './counter.js'

export default new Vuex.Store({
    state,
    getters,
    modules:{
        counter
    }
})

计数器.js

const state = {
    count: 10
}

const getters = {
    getCount: state => state.count
}

export default {
    namespaced: true,
    state,
    getters
}

应用程序.vue

import { mapGetters } from "vuex";

computed: {
    //doesn't work  [vuex] unknown getter: counter/count
    ...mapGetters("counter", [
        "count"
    ]), …

我对 Vuex 还很陌生，我想做的事情很简单，但我不知道典型的 Vuex 代码使用的最佳模式是什么。

我有一个初始化和存储Machine对象的操作，该对象也可以发出我想订阅的状态事件并收到商店用户的通知。

例如：此操作定义为：

createMachine({ commit, state }) {
      return state.m.createMachine().then(
        function (machineObject) {
          commit('setMachine', machineObject);
         }
      )
    }

machineObject我想从商店内部监听创建的对象事件，并最终更新一个商店变量，我可以使用以下内容从组件中观看该变量：

computed: { getMachineStatus() { return this.$store.state.machineStatus } }

我说清楚了吗？

谢谢。

我目前正在使用 Nuxt.js 开发一个通用应用程序，大多数页面上的数据是使用 fetch hook 以及 vuex 存储从 API 检索的。我开始注意到页面重新加载/刷新时出现错误，有时当我从导航栏访问页面时出现错误。页面错误为：

TypeError: Cannot read property 'data' of undefined

其中 data 是从 API 检索的对象。我在互联网上搜索了这一点，发现它与数据未加载或页面渲染而数据未完全检索有关。我找到了一种解决方法，在模板上使用 v-if 来检查数据是否已设置，然后显示内容。我的问题是是否有办法实现此目的，我尝试使用 async/await 关键字，但它没有帮助，而且我觉得 v-if 方法不是处理它的最佳方法。

编辑：使用 fetch() 时使用 $fetchState.pending 解决

尝试 1

主文件

import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

商店.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    patients: []
  }
});

尝试 1 错误

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (store.js?07a4:4)
    at Module../src/store/store.js (app.js:1342)

尝试 2

主文件

import { createApp } from 'vue'
import { store } …

我正在尝试读取/访问我的 vuex 存储，但收到错误“无法读取未定义的属性 '$store'，为什么？

这是我尝试过的...

我在单独的 store.js 文件中创建了一个 Vuex 商店。

import Vuex from "vuex";
import Vue from "vue";
import { Auth } from "aws-amplify";

Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    user: null
  },

  actions: {
    // AWS signup action.
    async signUp({ commit }, { username, password, firstName, lastName }) {
      const data = await Auth.signUp({
        username,
        password,
        attributes: {
          given_name: firstName,
          family_name: lastName
        }
      });
      console.log(data);
    }
  }
});

接下来，我将其注册到我的main.js Vue 实例中。

import Vuex from 'vuex' …

告诉我，我知道版本有问题，但是如何解决呢？

我努力了：

npm cache clean --force commands
npm install -g npm-install-peers
npm install --legacy-peer-deps

安装npm install --save-dev vuex@next给我这个错误

我的package.json文件：

"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"dependencies": {
"core-js": "^3.6.5",
"devextreme": "21.2.5",
"devextreme-vue": "21.2.5",
"single-spa-vue": "^2.1.0",
"vue": "^2.6.11"
},
"devDependencies": {
"@storybook/vue": "^6.4.14",
"@vue/cli": "^4.5.15",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"node-sass": "^6.0.1",
"sass-loader": "^10",
"eslint-plugin-vue": …

我正在关注他使用 vuex 的在线教程。我安装了 vuex，可以在我的 package.json 依赖项中看到。

{
  "name": "blabla",
  "version": "1.0.0",
  "description": "blablaa",
  "author": "blabla",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "vue": "^2.4.2",
    "vue-router": "^2.7.0",
    "vuetify": "^0.16.9",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-add-filehash": "^6.9.4",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": …

我想动态获取当前位置的纬度和经度。有没有任何插件或自定义代码可以做到这一点？