标签: vuex

我使用vuex和vuejs 2在一起.

我是新手vuex,我想看一个store变量.

我想watch在我的功能中添加功能vue component

这是我到目前为止:

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

我想知道是否有任何变化 my_state

我如何store.my_state在我的vuejs组件中观看？

在Vuex中,同时拥有"行动"和"突变"的逻辑是什么？

我理解组件的逻辑不能修改状态(这似乎很聪明),但同时具有动作和突变似乎是在编写一个函数来触发另一个函数,然后改变状态.

"行动"和"突变"之间有什么区别,它们如何协同工作,而且我很好奇为什么Vuex开发人员决定这样做？

是否可以在命名空间模块之间调度操作？

例如,我有vuex模块"gameboard"和"notification".每个都是命名空间.我想从游戏板向通知模块发送一个动作.

我以为我可以在调度操作名称中使用模块名称,如下所示:

// store/modules/gameboard.js
const actions = {
    myaction ({dispatch}) {
        ...
        dispatch('notification/triggerSelfDismissingNotifcation', {...})
    }
}

// store/modules/notification.js
const actions = {
    triggerSelfDismissingNotification (context, payload) {
        ...
    }
}

但是当我尝试这样做时,我得到的错误让我觉得vuex试图在我的游戏板模块中发送一个动作:

[vuex] unknown local action type:notification/triggerSelfDismissingNotification,global type:gameboard/notification/triggerSelfDismissingNotification

有没有从vuex模块调度到模块的方法,还是需要在root vuex实例中创建某种桥接？

我最近开始将事物从jQ迁移到更结构化的框架VueJS,我喜欢它!

从概念上讲,Vuex对我来说已经是一个典型的转变,但我相信我现在知道它的全部内容,完全得到它!但是存在一些小的灰色区域,主要是从实施的角度来看.

我觉得这个设计很好,但不知道它是否与单向数据流的Vuex 周期相矛盾.

基本上,从动作中返回一个promise(类似)对象被认为是一种好习惯吗？我将它们视为异步包装器,具有失败状态等,因此似乎非常适合返回一个承诺.相反,mutators只是改变了一些东西,而且是商店/模块中的纯粹结构.

我的行为有以下设置:

get1: ({commit}) => {
  //things
  this.get2(); //this is my question!
},
get2: ({commit}) => {
  //things
},

我希望能够从另一个内部调用一个动作,所以在这个例子中我希望能够get2()从内部调用get1().这是可能的,如果可以的话,我该怎么做？

在vuejs 2.0 model.sync中将被弃用.

那么,在vuejs 2.0中兄弟组件之间进行通信的正确方法是什么？

我在Vue 2.0中发现的想法是通过使用商店或事件总线进行兄弟姐妹的沟通.

据埃文说:

值得一提的是"在组件之间传递数据"通常是一个坏主意,因为最终数据流变得无法跟踪并且很难调试.

如果一个数据需要由多个组件共享,则更喜欢 全局存储或Vuex.

[ 链接到讨论 ]

和:

.once并且.sync已弃用.道具现在总是单向下降.要在父作用域中产生副作用,组件需要显式地emit显示事件而不是依赖于隐式绑定.

(所以,他建议使用$emit和$on)

我很担心因为:

• 每个store并event具有全球知名度(纠正我,如果我错了);
• 为每个次要的沟通创建一个新的商店是很重要的;

我想要的是以某种方式或兄弟姐妹组件的可见性范围.或者也许我没有抓住这个想法.eventsstores

那么,如何以正确的方式沟通？

我正在尝试使用vuejs和laravel的护照对用户进行身份验证.

我无法弄清楚如何通过动作向vuex变异发送多个参数.

- 商店 -

export default new Vuex.Store({
    state: {
        isAuth: !!localStorage.getItem('token')
    },
    getters: {
        isLoggedIn(state) {
            return state.isAuth
        }
    },
    mutations: {
        authenticate(token, expiration) {
            localStorage.setItem('token', token)
            localStorage.setItem('expiration', expiration)
        }
    },
    actions: {
        authenticate: ({ commit }, token, expiration) => commit('authenticate', token, expiration)
    }
})

- 登录方法 -

login() {
      var data = {
           client_id: 2,
           client_secret: '**************************',
           grant_type: 'password',
           username: this.email,
           password: this.password
      }
      // send data
      this.$http.post('oauth/token', data)
          .then(response => {
              // send the parameters to …

我有一个组件与一些表单验证.这是一个多步骤结帐表格.下面的代码是第一步.我想验证用户输入了一些文本,将其名称存储在全局状态,然后发送到下一步.我正在使用vee-validate和vuex

<template>
<div>
    <div class='field'>
        <label class='label' for='name'>Name</label>
        <div class="control has-icons-right">

            <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last">
            <span class="icon is-small is-right" v-if="errors.has('name')">
                <i class="fa fa-warning"></i>
            </span>
        </div>
        <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p>

    </div>
    <div class="field pull-right">
        <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button>
    </div>
</div>
</template>

<script>
export default {
    methods: {
        nextStep(){
            var self = this;

            // from baianat/vee-validate
            this.$validator.validateAll().then((result) => {
                if (result) {
                    this.$store.dispatch('addContactInfoForOrder', self);
                    this.$store.dispatch('goToNextStep');
                    return; …

我的应用使用Firebase API进行用户身份验证,将登录状态保存为Vuex状态中的布尔值.

当用户登录时,我设置登录状态并相应地有条件地显示登录/登出按钮.

但是当刷新页面时,vue应用程序的状态将丢失并重置为默认值

这会导致问题,即使用户登录并刷新页面时,登录状态也会设置为false,并且即使用户保持登录状态,也会显示登录按钮而不是注销按钮....

我该怎么做才能防止这种行为

我可以使用cookies 或任何其他更好的解决方案可用...

-

我的Vue组件是这样的:

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ item.total }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ...
        computed: {
            list: function() {
                return this.$store.state.transaction.list
            },
            ...
        }
    }
</script>

结果{{ item.total }}是

2600

但我希望格式化如下:

26.000.000,00

在jquery或javascript中,我可以做到

但是,如何在vue组件中执行此操作？