Question

我有这样的错误：我以前认为这是路由器的问题，但在创建只有vuex问题的新项目后仍然存在

这是我的main.js

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
  el: "#app",
  store,
  render: h => h(App)
})

store.js：

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    users: [
      {id: 1, name: 'Adrian', email: 'adrian@email.pl'},
      {id: 2, name: 'Magda', email: 'magda@email.pl'}
    ]
  }
})

和我的组件使用$ store：

<template>
  <div class="usersNames">
    <ul>
      <li v-for="user in usersNames">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'usersNames',
    computed: {
      usersNames() {
        return this.$store.state.users;
      }
    }
  }
</script>

Answer 1

您的示例看起来应该可行，但我想提供一种不同的策略，我认为这将是一种改进，也应该解决您的问题。

在商店中为您尝试在组件中访问的数据创建一个getter。

所以将商店更改为：

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

  Vue.use(Vuex)

  export const store = new Vuex.Store({
    state: {
      users: [
       {id: 1, name: 'Adrian', email: 'adrian@email.pl'},
       {id: 2, name: 'Magda', email: 'magda@email.pl'}
      ]
    },
    getters:{
      users: state => return state.users
    }
  });

然后，在您的组件中，使用该getter来吸引用户。

<script>
 export default {
    name: 'usersNames',
    computed: {
     usersNames() {
       return this.$store.getters.users
    }
   }
 }
</script>

Answer 2

您可以从'./store'更改main.js：import {store};

Answer 3

似乎你的vuex没有正确注入vue。

可能与您的问题没有关系，但只是为了最佳实践，最好使用mapState帮助器;
在您的组件中：

import { mapState } from 'vuex'

export default {
  name: 'usersNames',
  computed: {
    ...mapState({
      usersNames: 'users'
    }),
    yourLocalComputed () {}
  }
}

Vuex $州问题

3 个答案: