Questions tagged «vuex»

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保只能以可预测的方式更改状态。

13
Vuex行动与变异
在Vuex中,同时具有“动作”和“变异”的逻辑是什么? 我了解组件无法修改状态(看起来很聪明)的逻辑,但是同时具有动作和突变似乎就像您在编写一个函数来触发另一个功能,然后改变状态一样。 “动作”和“变异”之间有什么区别,它们如何协同工作,而且,我很好奇为什么Vuex开发人员决定采用这种方式?
173 vue.js  vuex 

17
vue.js 2如何从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组件?

2
有没有办法在两个命名的vuex模块之间分派动作?
是否可以在命名空间模块之间分派动作? 例如,我有vuex模块“游戏板”和“通知”。每个都有名称空间。我想将一个动作从游戏板上调度到通知模块。 我以为可以在调度操作名称中使用模块名称,如下所示: // store/modules/gameboard.js const actions = { myaction ({dispatch}) { ... dispatch('notification/triggerSelfDismissingNotifcation', {...}) } } // store/modules/notification.js const actions = { triggerSelfDismissingNotification (context, payload) { ... } } 但是,当我尝试执行此操作时,我收到一些错误,这些错误使vuex试图在我的游戏板模块中调度一个动作: [vuex]未知的本地操作类型:通知/ triggerSelfDismissingNotification,全局类型:游戏板/通知/ triggerSelfDismissingNotification 有没有一种方法可以在vuex模块之间进行分配,还是需要在根vuex实例中创建某种桥接?
159 vue.js  vuejs2  vuex 

3
从另一个动作中调用一个动作
我的动作有以下设置: get1: ({commit}) => { //things this.get2(); //this is my question! }, get2: ({commit}) => { //things }, 我希望能够从另一个内部调用一个动作,因此在此示例中,我希望能够get2()从内部调用get1()。这可能吗,如果可以,我该怎么做?
133 vue.js  vuex 

5
从Vuex操作返回承诺
最近,我开始将内容从jQ迁移到VueJS这样的结构化框架,我喜欢它! 从概念上讲,Vuex对我来说是一种范式转换,但是我有信心我知道现在的全部情况,并且完全可以理解!但是存在一些小的灰色区域,主要是从实现的角度来看。 我觉得这个设计很好,但是不知道它是否与单向数据流的Vuex 周期相矛盾。 基本上,从动作中返回一个promise(类似)对象是否被视为一种好习惯?我将它们视为异步包装程序,带有失败状态等,因此看起来很适合返回承诺。相反,变异器只是改变事物,是商店/模块中的纯结构。

3
Vuex-将多个参数传递给突变
我正在尝试使用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 = …
124 vue.js  vuejs2  vuex 

6
VueJs 2.0中同级组件之间的通信
总览 在Vue.js 2.x中,model.sync将不推荐使用。 那么,在Vue.js 2.x中的兄弟组件之间进行通信的正确方法是什么? 背景 据我了解Vue 2.x,同级通信的首选方法是使用商店或事件总线。 根据Evan(Vue的创建者)的说法: 值得一提的是,“在组件之间传递数据”通常不是一个好主意,因为最终数据流变得不可跟踪且很难调试。 如果一条数据需要由多个组件共享,则首选 全局存储或Vuex。 [ 讨论链接 ] 和: .once并且.sync已弃用。现在,道具总是单向下降。为了在父范围内产生副作用,组件需要显式地声明emit一个事件,而不是依赖于隐式绑定。 因此,Evan 建议使用$emit()和$on()。 顾虑 让我担心的是: 每个store并event具有全球知名度(纠正我,如果我错了); 为每次次要沟通创建一个新的商店太浪费了; 我想要的是兄弟姐妹组件的某种范围 events或stores可见性。(或者也许我不理解上面的想法。) 题 那么,同级组件之间进行通信的正确方法是什么?

4
Vuex-已将计算属性“名称”分配给但没有设置器
我有一个带有表单验证的组件。这是一个多步骤结帐表格。下面的代码是第一步。我想验证用户是否输入了一些文本,将其名称存储在全局状态下,然后发送至下一步。我正在使用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 …

5
Vuex:来自另一个模块的访问状态
我要访问state.session的instance.js从records_view.js。这是如何完成的? 商店/模块/instance.js const state = { // This is what I want to access in records_view.js session: {} }; const getters = { sessionGetter: state => state.session }; 商店/模块/records_view.js const actions = { getSettingsAction (context, props) { // This is how I'm trying to access session, which doesn't work let …
107 javascript  vue.js  vuex 

6
页面上的Vuex状态刷新
我的应用程序使用Firebase API进行用户身份验证,将登录状态另存为Vuex状态中的布尔值。 当用户登录时,我设置了登录状态并相应地显示“登录/注销”按钮。 但是刷新页面后,vue应用程序的状态将丢失并重置为默认状态 这会导致出现问题,因为即使用户登录并刷新页面,登录状态也将被设置为false,即使用户保持登录状态,也会显示登录按钮而不是退出按钮。 我应该怎么做才能防止这种行为 我应该使用Cookie 还是可以使用其他更好的解决方案... --
105 vue.js  vuejs2  state  vuex 

5
如何在Vuex中将另一个吸气剂称为吸气剂?
考虑一个简单的Vue博客: 我正在使用Vuex作为数据存储,我需要设置两个getter:一个getPost用于post通过ID检索ID的getter ,以及一个listFeaturedPosts用于返回每个精选文章的前几个字符的getter 。特色帖子列表的数据存储架构通过其ID引用帖子。为了显示摘录,这些ID必须解析为实际帖子。 store / state.js export const state = { featuredPosts: [2, 0], posts: [ 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', ] } store …
104 vuejs2  vuex 

8
如何在Vue组件中格式化货币?
我的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 }}是 26000000 但是我想格式化它是这样的: 26.000.000,00 在jQuery或JavaScript中,我可以做到 但是,如何在vue组件中做到这一点?

12
我可以从Vuex存储中的一种变异中调用提交吗
我有一个vuex商店,如下所示: import spreeApi from '../../gateways/spree-api' // initial state const state = { products: [], categories: [] } // mutations const mutations = { SET_PRODUCTS: (state, response) => { state.products = response.data.products commit('SET_CATEGORIES') }, SET_CATEGORIES: (state) => { state.categories = state.products.map(function(product) { return product.category}) } } const actions = { FETCH_PRODUCTS: …

3
从Vuex中的一个模块更改另一模块状态
我的vuex商店中有两个模块。 var store = new Vuex.Store({ modules: { loading: loading posts: posts } }); 在模块中loading,我有一个saving可以设置true或的属性,false并且还有一个名为TOGGLE_SAVING该属性的突变函数。 在模块中posts,在获取帖子之前和之后,我想更改property saving。我是通过commit('TOGGLE_SAVING')从posts模块中的操作之一进行调用来实现的。 var getPosts = function (context) { contex.commit(TOGGLE_LOADING); }; 当它尝试提交时,控制台中出现以下错误 [vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING 如何使用来更改另一个模块中的状态commit?
77 vue.js  vuejs2  vuex 

5
如何使用Vuex动作中的Vue路由器导航
我正在使用Vue 2.x和Vuex 2.x创建一个Web应用程序。我正在通过http调用从远程位置获取一些信息,我希望如果该调用失败,我应该重定向到其他页面。 GET_PETS: (state) => { return $http.get('pets/').then((response)=>{ state.commit('SET_PETS', response.data) }) }, error => {this.$router.push({path:"/"}) } ) } 但是this.$router.push({path:"/"})给我以下错误。 未捕获(承诺)TypeError:无法读取未定义的属性“ push” 如何做到这一点。 模拟的JsFiddle:在这里

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.