javascript 与Vue的通量 - Vuex

Posted 2021-05-03

// FLUX
// Action -> Dispatcher -> Store -> View
// 1. The view dispatches actions that describe what happened
// 2. The store recieves the action and determines what state changes should occur
// 3. After the state updates, the new state is pushed to the view

// Allows for breaking up state management into isolated, smaller and testable parts
// Components are simpler. They become simple render functions. 
// Makes them smaller, easier to understand and more composable

// VUEX
// 1. All app data is in a single data structure called state, which is held in the store
// 2. App reads data from the store
// 3. State is never mutated directly outside the store
// 4. Views dispatch actions that describe what happened
// 5. The actions commit to mutations
// 6. Mutations directly mutate/change the store state
// 7. When state is mutated, relevant components/views are re-rendered

// Vuex differs from Redux by mutating the state DIRECTLY 
// as opposed to making the state immutable and replacing it entirely

// STATE
// To build the state of an app, its important to understand and segregate component level and app level data
// App level data is the data that needs to be shared between components, which IS the state
const state = {
  notes: [], 
  timestamps: []
};

// MUTATIONS
// Mutation really simply means a function that is responsible in mutating store state
// in Vuex, mutations need to be explicitly defined
// Consists of a string type and a handler
// When the mutation function is run the first argument passed in is the state.
// Mutations always have access to state as the first argument
// In addition, when an action calls a mutation, it may or may not pass a "payload" to the mutation.
  // The payload is an optional argument. 
  // It exists only when an action subsequently passes it to the mutation
// mutations have to be synchronous
  // if asynchronous taks need to be done, actions are responsible in dealing with them 
  //prior to calling mutations
const mutations = {
  ADD_NOTE(state, payload) {
    let newNote = payload;
    state.notes.push(newNote);
  },
  ADD_TIMESTAMP(state, paylaod) {
    let newTimeStamp = payload;
    state.timestamps.push(newTimeStamp);
  }
};
  
// ACTIONS
// Functions that exist to call mutations. 
// Can perform asynchronous calls/logic handling before committing to mutations
// Similar to mutations, actions automatically receive an object as the first argument
  // In actions, this object is regarded as the "context" object which allows us to access the state
  // with context.state, 
  // access getters with context.getters, 
  // and call/commit to mutations with context.commit
// Optional second argument is the payload
const actions = {
  addNote(context, payload) {
    context.commit('ADD_NOTE', payload);
  },
  addTimestamp(context, payload) {
    context.commit('ADD_TIMESTAMP', payload);
  }
};

// GETTERS
// Getters are to an app store what computed properties are to a component
// Getters are used to derive computed info from store state
// Receive state as the first argument
const getters = {
  getNotes: state => state.notes,
  getTimestamps: state => state.timestamps,
  getNoteCount: state => state.notes.length
};

// STORE
// The store object is how our mutations and getters get access to the state object and how actions can 
// directly commit to mutations with context.commit.
// To inject the store to the entire application and have it accessible within all components, we need to
// pass the store object to the application’s Vue instance:
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});