Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # Vuex Cheat Sheet
- ```js
- new Vuex.Store({
- modules: {
- counter: {
- state: {
- count: 0,
- },
- getters: {
- square(state) {
- return state.count * state.count
- }
- },
- mutations: {
- increment(state) {
- state.count++;
- },
- setNewValue(state, newValue) {
- state.count = newValue;
- },
- },
- actions: {
- getCountFromApi({ commit }) {
- return someApi.getCount()
- .then((newCount) => {
- commit('setNewValue', newCount);
- });
- },
- },
- },
- // More modules ...
- },
- });
- ```
- ## State
- State is the storage layer.
- **Never** manipulate state directly, use a mutation or action for that.
- Example accessing the store from a component:
- ```js
- const Counter = {
- template: `<div>{{ count }}</div>`,
- computed: {
- count () {
- return this.$store.state.counter.count;
- }
- }
- }
- ```
- ### Accessing State
- ```js
- import store from '../store';
- console.log(store.state.counter.count);
- ```
- ```js
- // in a component method
- console.log(this.$store.counter.count);
- ```
- ## Getters
- Retrieve computed derived state based on the store.
- Getter functions receive the following positional arguments:
- ```
- state, // will be module local state if defined in a module.
- getters, // module local getters of the current module
- rootState, // global state (only available in a module)
- rootGetters // all getters (only available in a module)
- ```
- ### Getting a Getter
- Root level access:
- ```js
- console.log(store.getters.fooBar);
- ```
- Method style:
- ```js
- getters: {
- // ...
- getTodoById: (state) => (id) => {
- return state.todos.find(todo => todo.id === id)
- }
- }
- ```
- ```js
- store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
- ```
- Module access:
- ```js
- console.log(store.getters['counter/square']);
- ```
- ## Mutations
- The only way to change state is through a mutation. Mutations are
- **synchronous**.
- Mutation functions in the Store receive positional arguments:
- - `state` - Current local state
- - `payload` - Optional payload is whatever (if anything) is passed to
- `commit()`'s second argument.
- Mutation functions edit state directly.
- ```js
- mutations: {
- increment(state) {
- state.count++;
- },
- },
- ```
- ### Commit a Mutation
- To invoke a mutation, use the `commit()` function.
- ```js
- this.$store.commit('counter/increment');
- ```
- ```js
- // With a payload of 22
- this.$store.commit('counter/setNewValue', 22);
- ```
- ## Actions
- Actions are like **asynchronous** mutations.
- - Instead of mutating the state, actions commit mutations.
- - Actions can contain arbitrary asynchronous operations.
- - Return a promise.
- Action functions receives positional arguments `context` and `payload`.
- `context` looks like this:
- ```js
- {
- state, // same as `store.state`, or local state if in modules
- rootState, // same as `store.state`, only in modules
- commit, // same as `store.commit`
- dispatch, // same as `store.dispatch`
- getters, // same as `store.getters`, or local getters if in modules
- rootGetters // same as `store.getters`, only in modules
- }
- ```
- `payload` is optional if passed as the second argument to `dispatch()`.
- Actions should `commit` any changes via a mutation.
- ```js
- const actions = {
- getCountFromApi({ commit }) {
- return someApi.getCount()
- .then((newCount) => {
- commit('setNewValue', newCount);
- });
- },
- };
- ```
- ### Dispatch
- Dispatch can also take a `payload` as a second argument.
- ```js
- this.$store.dispatch('counter/getCountFromApi');
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement