Question

我刚开始在这里学习Vuex。到目前为止，我已经将共享数据存储在store.js文件中，并在每个模块中导入store，但这很烦人，我担心会改变状态。

我挣扎的是如何使用Vuex从firebase导入数据。根据我的理解，只有动作可以进行异步调用，但只有突变可以更新状态？

现在我正在从我的突变对象调用firebase，它似乎工作正常。老实说，所有上下文，提交，发送等似乎都有点过载。我希望能够使用必要的最少量的Vuex来提高工作效率。

在文档中看起来我可以编写一些代码来更新mut对象中的状态，如下所示，将其导入computed属性中的组件，然后使用{{1}触发状态更新}。这似乎是使用Vuex所需的最小数量，但随后进行了哪些操作？困惑:(任何有关最好的方法或最佳实践的帮助将不胜感激！

store.commit('increment')

我的代码在

下面

store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

main.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex); 

const db = firebase.database();
const auth = firebase.auth();

const store = new Vuex.Store({
  state: {
    userInfo: {},
    users: {},
    resources: [],
    postKey: ''
  },
  mutations: {

    // Get data from a firebase path & put in state object

    getResources: function (state) {
      var resourcesRef = db.ref('resources');
      resourcesRef.on('value', snapshot => {
          state.resources.push(snapshot.val());
      })
    },
    getUsers: function (state) {
      var usersRef = db.ref('users');
      usersRef.on('value', snapshot => {
          state.users = snapshot.val();
      })  
    },
    toggleSignIn: function (state) {
      if (!auth.currentUser) {
          console.log("Signing in...");
          var provider = new firebase.auth.GoogleAuthProvider();
          auth.signInWithPopup(provider).then( result => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = result.credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          // Set a user
          var uid = user.uid;
          db.ref('users/' + user.uid).set({
              name: user.displayName,
              email: user.email,
              profilePicture : user.photoURL,
          });

          state.userInfo = user;
          // ...
          }).catch( error => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
          });
      } else {
          console.log('Signing out...');
          auth.signOut();      
      }
    }
  }
})

export default store

App.vue

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
  el: '#app',
  store, // Inject store into all child components
  template: '<App/>',
  components: { App }
})

Answer 1

所有AJAX都应该采取行动而不是突变。因此，流程将通过调用您的操作

开始

...将数据从ajax回调提交到变异

...负责更新vuex状态。

参考：http://vuex.vuejs.org/en/actions.html

以下是一个例子：

// vuex store

state: {
  savedData: null
},
mutations: {
  updateSavedData (state, data) {
    state.savedData = data
  }
},
actions: {
  fetchData ({ commit }) {
    this.$http({
      url: 'some-endpoint',
      method: 'GET'
    }).then(function (response) {
      commit('updateSavedData', response.data)
    }, function () {
      console.log('error')
    })
  }
}

然后要调用你的ajax，你必须立即调用这个动作：

store.dispatch('fetchData')

在您的情况下，只需将this.$http({...}).then(...)替换为您的firebase ajax并在回调中调用您的操作。

使用Vuex进行异步调用

1 个答案: