【问题标题】:#JSON to #Vuex store#JSON 到 #Vuex 存储
【发布时间】:2018-02-05 13:37:55
【问题描述】:

我是 vue.js 提供的 Vuex 商店的新手。我想在下面的场景中使用它。

1.“状态”是指由服务器提供的任何静态或动态数据。或者说存储在 json 中的数据?

模板。

<!-- title start -->
<div class="_Handler-0-1">
  <x-x :path="store.glyph.path['0']":classs="store.static.class['0']"/>
</div>
<!-- title end -->

对象

store: {
 glyph: {
   path: {
     0: '<svg>.....</svg'>
  }
 },
 static: {
   class: {
      0: 'icon-phone'
    }
  }
 }

【问题讨论】:

    标签: javascript vue.js vuex nuxt.js vuex-modules


    【解决方案1】:

    值得阅读有关 vuex 的文档。

    https://vuex.vuejs.org/en/intro.html

    这都是关于状态管理的。如果需要,您可以从服务器检索数据并将其存储在其中,或者您可以存储用户输入的数据。它非常灵活,但它的设计方式是确保始终正确管理它

    【讨论】:

    • 我支持这一点,不要拖延阅读文档,Vue.js 文档作为一个整体写得很好:-) 另外,你的 :class 属性有三个 S' s
    • 组件没有接收或说从存储中获取数据。我在 beforeCreate 钩子上初始化了 commit('load')。
    【解决方案2】:

    Vuex' 有一个功能生命周期:

    • 调度员

    • 操作

    • 突变

    • 吸气剂

    调度员.dispatch操作

    动作commit突变

    突变mutate (change)状态

    Getters return 部分州。

    我不知道您如何完成存储的完整设置,但要检索您的状态的两个部分,我会编写一个返回两个部分的 getter。

    const store = new Vuex.Store({
      state: {
        glyph: {
          path: '<svg>.....</svg>'
        },
        static: {
          class: 'icon-phone'
        }
      },
      getters: {
        glyph: state => state.glyph,
    
        static: state => state.static
    
      }
    })

    <template>
      <div class="_Handler-0-1">
        <x-x :path="glyph.path":class="static.path"/>
      </div>
    </template>
    
    <script>
    import { ...mapGetters } from 'vuex'
    export default {
      name: 'foo',
      computed: {
        ...mapGetters(['glyph', 'static'])
      }
    }
    </script>

    另外值得一提的是static是一个保留字。

    【讨论】:

    • 有什么特别的方法可以将批量数据推送到 vuex 吗?
    • 就像 JoeWinchester 说的那样......你可以在某个地方的组件或服务中向服务器发出请求,然后映射一个 action (...mapActions(['yourAction])) or dispatch` 一个动作您的服务 (store.dispatch('action', {payLoad: payloadFromServer}))
    猜你喜欢
    • 2020-11-29
    • 2018-07-14
    • 2020-01-06
    • 1970-01-01
    • 2018-11-10
    • 2018-01-09
    • 1970-01-01
    • 1970-01-01
    • 2022-01-09
    相关资源
    最近更新 更多