Vuex $state问题

Question

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

enter image description here

这是我的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

你可以将main.js:import {store}从'./store'；

Answer 3

似乎你的vuex没有正确注射到vue中。

也许与你的问题无关，但为了最好的实践，最好使用mapState助手；

在您的组件中：

import { mapState } from 'vuex'

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