首页 文章

Vuex $州问题

提问于
浏览 次
0

我有这样的错误：我之前认为这是路由器的问题，但在创建只有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>
vue.js state vuex

3 回答

  • -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>
    回复于
  • 1

    你可以从'./store'改变main.js：import ;

    回复于
  • 0

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

    也许与你的问题无关，但只是为了最佳实践，最好使用mapState helper;
    在您的组件中：

    import { mapState } from 'vuex'

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

相关问题