SHARE
TWEET

Untitled

a guest Jul 19th, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. Using Vuex for Beginners
  2. ===================
  3.  
  4. 1. Adding Vuex to your package.json
  5. -----------------------------------------
  6.  
  7.     ```
  8.       yarn add vuex
  9.     ```
  10.    
  11.     ```
  12.       npm add vuex
  13.     ```
  14.  
  15. 2. Lines of code to add at the App.vue from your Store
  16. -----------------------------------------
  17.  
  18.     ```
  19.       new Vuex.store({
  20.         state: { // The data
  21.           products: []
  22.         },
  23.        
  24.         getters: { // Getting Computed properties
  25.           methodOfGetters() {
  26.           ....
  27.         },
  28.        
  29.         actions: { // Make calls from an API
  30.           methodOfActions() {
  31.           ....
  32.           }
  33.         },
  34.        
  35.         mutations: { // Responsable for setting and updating the state
  36.           methodOfMutations() {
  37.            
  38.           }
  39.         }
  40.        
  41.       })
  42.     ```
  43.  
  44. 3. Using mutations, to update the state, we need to do it with a mutations method to follow the pattern that Vuex offers to us
  45. -----------------------------------------
  46.    
  47.     ```
  48.       mutations: { // We need two parameters, the actual state and the payload to be used
  49.           methodOfMutations(state, products) {
  50.             state.products = products
  51.           }
  52.         }
  53.  
  54.     ```
  55.    
  56. 3.1 Then, is followed by the component where you are going to store that data
  57.  
  58.     ```
  59.       computed: {
  60.         products() {
  61.           return store.state.products
  62.         }
  63.       },
  64.     ```
  65.    
  66. 3.2 Finally, to execute the mutation, select the method that you desire to apply it on the component of your choice, to proceed with the mutation, you access the store and commit the mutation, typing the name of the mutation to follow with the payload to update
  67.  
  68.     ```
  69.       store.commit('methodOfMutations', products)
  70.     ```
  71.  
  72. 4. Using the getters to perform simple calculations or retrieve, getters need two parameters, the state and all the actual getters
  73. -----------------------------------------
  74.     ```
  75.       getters: {
  76.           methodOfGetters(state, getters) {
  77.             return state.products.filter(product => product.inventory > 0)
  78.         }
  79.       },
  80.     ```
  81.  
  82. 4.1 Using the getter method in the desired component
  83.  
  84.  
  85.     ```
  86.       computed: {
  87.         products() {
  88.           return store.getters.methodOfGetters
  89.         }
  90.       },
  91.     ```
  92.  
  93. 5. To perform a better use of actions
  94. -----------------------------------------
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top