text Vuex组件启动器

Posted 2021-05-03

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    // State is like a component's data.
    // You can access it to get data directly when you need it as-is.
    // If you do need the data processed/filtered, etc., use getters.
    // You should NEVER change the state directly; use mutations for that.
       Doing so bypasses the tracking benefits of Vuex
       By centralizing data-altering logic, you don’t have to look far if there 
       are inconsistencies in the state.
       We’re minimising the possibility that some random component (possibly 
       in a third party module) has changed the data in an unexpected fashion.
    
    counter: 0,
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  
  
  getters: {
    // PARAMS: (state, getters)
    // Functions used to return values from the store.
    // Like computed properties for stores.
       Access them like they're a property - don't include () at the end
    // Use if you need to compute derived state, such as returning a list of
       items that meet a criteria (ex: filtering completed tasks).
    // Don't use in a dummy way (when you're not doing anything to the data)
    // Using getters as 2nd param, you can get the results of other getters
    
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      // Getters can also receive other getters as the 2nd argument
      return getters.doneTodos.length
    },
    getTodoById: (state) => (id) => {
      // You can pass arguments to getters by returning a function
      return state.todos.find(todo => todo.id === id)
    }
    
    // CALLING FROM A VUE FILE:
    this.$store.getters.doneTodos
  },
  
  
  mutations: {
    // PARAMS: (state, payload)
    // state: is referred to as a string type, which is basically the name of the function
    // payload: data you want the state changed to
    // handler function: code to execute
    
    // Functions that commit changes to the state
    // Are responsible for setting and updating the state/single state changes
    // Are synchronous
    // Can process the values being passed before saving them
    
    // A handler function performs the state modification,
    // and rec's the state as the first arg
    
    // You can't directly call a mutation handler.
    // A commit triggers a mutation. To invoke a mutation handler, you "commit" the mutation.
    // Ex: this.$store.commit('')
    
    increment (state) {
      state.count++
    }
    
    // Include 2nd param for a payload
    // Here the payload is a single value, but ideally it should be an
    // object so it can contain multiple fields
    increment (state, n) {
      state.count += n
    }
    
    // PAYLOAD AS DATUM EXAMPLE
    increment (state, n) {
      state.count += n
    }
    
    // PAYLOAD AS OBJECT EXAMPLE
    increment (state, payload) {
      state.count += payload.amount
    }
    
    // CALLING FROM A VUE FILE:
    this.$store.commit('increment')
    
    // CALLING, PAYLOAD AS DATUM EXAMPLE
    this.$store.commit('increment', 10)
    
    // CALLING, PAYLOAD AS OBJECT EXAMPLE (object can contain multiple fields)
    this.$store.commit('increment', {
      amount: 10
    })
    
    // CALLING, DATA FROM INPUT EXAMPLE
    this.$store.commit('change', event.target.value)
  },
  
  
  actions: {
    // PARAMS: (context, payload)
    // Like mutations, but they commit data typically during asynchronous tasks.
    // For ajax / async stuff.
    // Instead of mutating the state, actions commit mutations.
    // Some say "invoke mutations"
    
    // Actions are triggered with the store.dispatch method
    // Do this from your SFC's method
    
    // Acion sare functions that receive a context object.
    // The contexty object provides access to the data store features.
    
    // First arg is the context object
    // context.commit
    // context.state
    
    // Second, optional arg is a payload
    
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
    
    // CALLING FROM A VUE FILE:
    this.$store.dispatch('incrementAsync', {
      amount: 10
    })
  }
})