SHARE
TWEET

Untitled

a guest May 24th, 2019 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # Vuex Cheat Sheet
  2. ```js
  3. new Vuex.Store({
  4.   modules: {
  5.     counter: {
  6.       state: {
  7.         count: 0,
  8.       },
  9.       getters: {
  10.         square(state) {
  11.           return state.count * state.count
  12.         }
  13.       },
  14.       mutations: {
  15.         increment(state) {
  16.           state.count++;
  17.         },
  18.         setNewValue(state, newValue) {
  19.           state.count = newValue;
  20.         },
  21.       },
  22.       actions: {
  23.         getCountFromApi({ commit }) {
  24.           return someApi.getCount()
  25.             .then((newCount) => {
  26.               commit('setNewValue', newCount);
  27.             });
  28.         },
  29.       },
  30.     },
  31.     // More modules ...
  32.   },
  33. });
  34. ```
  35.  
  36. ## State
  37. State is the storage layer.
  38.  
  39. **Never** manipulate state directly, use a mutation or action for that.
  40.  
  41. Example accessing the store from a component:
  42.  
  43. ```js
  44. const Counter = {
  45.   template: `<div>{{ count }}</div>`,
  46.   computed: {
  47.     count () {
  48.       return this.$store.state.counter.count;
  49.     }
  50.   }
  51. }
  52. ```
  53. ### Accessing State
  54.  
  55. ```js
  56. import store from '../store';
  57.  
  58. console.log(store.state.counter.count);
  59. ```
  60.  
  61. ```js
  62. // in a component method
  63. console.log(this.$store.counter.count);
  64. ```
  65.  
  66. ## Getters
  67. Retrieve computed derived state based on the store.
  68.  
  69. Getter functions receive the following positional arguments:
  70.  
  71. ```
  72. state,       // will be module local state if defined in a module.
  73. getters,     // module local getters of the current module
  74. rootState,   // global state (only available in a module)
  75. rootGetters  // all getters (only available in a module)
  76. ```
  77.  
  78. ### Getting a Getter
  79. Root level access:
  80. ```js
  81. console.log(store.getters.fooBar);
  82. ```
  83.  
  84. Method style:
  85. ```js
  86. getters: {
  87.   // ...
  88.   getTodoById: (state) => (id) => {
  89.     return state.todos.find(todo => todo.id === id)
  90.   }
  91. }
  92. ```
  93.  
  94. ```js
  95. store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
  96. ```
  97.  
  98. Module access:
  99. ```js
  100. console.log(store.getters['counter/square']);
  101. ```
  102.  
  103.  
  104. ## Mutations
  105. The only way to change state is through a mutation. Mutations are
  106. **synchronous**.
  107.  
  108. Mutation functions in the Store receive positional arguments:
  109.   - `state` - Current local state
  110.   - `payload` - Optional payload is whatever (if anything) is passed to
  111.     `commit()`'s second argument.
  112.  
  113. Mutation functions edit state directly.
  114.  
  115. ```js
  116. mutations: {
  117.   increment(state) {
  118.     state.count++;
  119.   },
  120. },
  121. ```
  122.  
  123. ### Commit a Mutation
  124.  
  125. To invoke a mutation, use the `commit()` function.
  126.  
  127. ```js
  128. this.$store.commit('counter/increment');
  129. ```
  130.  
  131. ```js
  132. // With a payload of 22
  133. this.$store.commit('counter/setNewValue', 22);
  134. ```
  135.  
  136. ## Actions
  137. Actions are like **asynchronous** mutations.
  138.   - Instead of mutating the state, actions commit mutations.
  139.   - Actions can contain arbitrary asynchronous operations.
  140.   - Return a promise.
  141.  
  142. Action functions receives positional arguments `context` and `payload`.
  143.  
  144. `context` looks like this:
  145. ```js
  146. {
  147.   state,      // same as `store.state`, or local state if in modules
  148.   rootState,  // same as `store.state`, only in modules
  149.   commit,     // same as `store.commit`
  150.   dispatch,   // same as `store.dispatch`
  151.   getters,    // same as `store.getters`, or local getters if in modules
  152.   rootGetters // same as `store.getters`, only in modules
  153. }
  154. ```
  155.  
  156. `payload` is optional if passed as the second argument to `dispatch()`.
  157.  
  158. Actions should `commit` any changes via a mutation.
  159. ```js
  160. const actions = {
  161.   getCountFromApi({ commit }) {
  162.     return someApi.getCount()
  163.       .then((newCount) => {
  164.         commit('setNewValue', newCount);
  165.       });
  166.   },
  167. };
  168. ```
  169.  
  170. ### Dispatch
  171.  
  172. Dispatch can also take a `payload` as a second argument.
  173.  
  174. ```js
  175. this.$store.dispatch('counter/getCountFromApi');
  176. ```
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top