Storage related
There is some relationship between Vuex and local storage (such as localStorage) and cookie storage (such as document.cookie), but they are different concepts and serve different purposes.
Vuex:
Vuex is the official state management library for Vue.js, used to manage the global state of the application in Vue.js applications.
Vuex is mainly used to store and manage various states in front-end applications, including user information, application configuration, data cache, etc. It provides a centralized state storage mechanism that allows different components to share and synchronize state.
Vuex data is stored in memory and is usually not persisted to the hard disk.
Local Storage (localStorage):
localStorage is a local storage mechanism provided by the browser, allowing you to store data in the browser in the form of key-value pairs. The data can be persisted between different pages and sessions.
localStorage is mainly used to store small amounts of data in the browser, such as user configuration, user preferences, temporary session data, etc. It is a simple persistent data storage tool.
Cookie Storage:
Cookies are another way of storing data in the browser, but they are typically used to store small textual data such as user authentication tokens, session IDs, etc.
Cookies have some limitations, such as size limits for each cookie and security considerations, and are therefore not suitable for storing large amounts of data or sensitive information.
Relation and purpose:
Vuex can be used in conjunction with local storage and cookie storage to achieve more complex state management and data persistence. For example, you can store some important application state in Vuex, while storing data such as user preferences or session tokens in localStorage or cookies.
Vuex can use localStorage or other storage mechanisms to achieve state persistence so that the application state remains unchanged when the page is refreshed or reloaded. This usually involves storing state data from Vuex into localStorage, and restoring the state from localStorage when the application initializes.
It is important to note that storing sensitive information (such as user passwords) should generally not be stored in local storage or cookies, but should use more secure means, such as session management or token verification on the backend server. Data stored locally should be non-sensitive and properly encrypted and secure.
Basic Properties
Vuex is the official state management library for Vue.js, used to manage the global state of the application in Vue.js applications. Vuex.Store is one of the core parts of Vuex. It contains state, methods for changing state (mutations), methods for triggering state changes (actions), and methods for obtaining state (getters).
In Vuex.Store, state and mutations are used to store and modify the state of the application respectively.
state: state is the data source of the application. It is an ordinary JavaScript object that contains the global state data of the application. By accessing state, you can get information about the current state of your application. For example:
const store = new Vuex.Store({ state: { count: 0 } }) In the above example, state contains a state property named count with an initial value of 0.
Mutations: Mutations are methods used to modify state. They are synchronous functions, and each mutation receives a parameter for the current state (state) and a parameter for updating the state (usually called a payload). The main role of mutations is to ensure the traceability of state changes, because each state change must go through a clear step. For example:
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ }, decrement(state) { state.count– } } }) In the above example , we define two mutations, which are used to increase and decrease the value of the count state respectively. To trigger these mutations, you can call them through the store.commit method: store.commit('increment') // Increase the count store.commit('decrement') // Decrease the count By using the commit method, you can ensure that in the application Track and log changes in the program's state.
In short, the state in Vuex.Store is used to store the global state of the application, while mutations are used to define traceable methods for modifying the state. This explicit approach to state management helps to better manage and maintain state in large applications.
actions and getters
When using Vuex for state management, in addition to state and mutations, there are also actions and getters to further organize and manage the state of your application.
Actions:
Actions are where asynchronous operations and business logic are handled. They can contain any JavaScript code and can trigger mutations to modify state.
Actions are triggered through the store.dispatch method, which accepts an object parameter containing the data to be passed to the mutation. This separates asynchronous operations and data retrieval from mutations, making the code more maintainable.
Example:
const store = new Vuex.Store({ state: { count: 0},mutations: { increment(state) { state.count++}},actions: { asyncIncrement(context) { setTimeout(() => { context. commit('increment') // Trigger mutation to increase count}, 1000)}}})// Trigger action in componentstore.dispatch('asyncIncrement') // Increase count after 1 second
Getters:
Getters are used to derive some derived states from state or perform some calculations. They allow you to obtain and use derived state in a component without repeating the same calculation logic inside the component.
Getters is defined as a function that accepts state as a parameter and can return a new state calculated based on state.
Example:
const store = new Vuex.Store({ state: { items: [{ id: 1, name: 'Item 1', price: 10 },{ id: 2, name: 'Item 2', price: 20 } ,{ id: 3, name: 'Item 3', price: 30 }]},getters: { totalPrice(state) { return state.items.reduce((total, item) => total + item.price, 0)}}})// Use getter in the componentconst total = store.getters.totalPrice // Get the total price, the value is 60
In the example above, totalPrice is a getter that calculates the total price of all items. By using getters, you can easily get this derived state in your component without having to recalculate it in every component.
In short, actions are used to handle asynchronous operations and business logic, while getters are used to derive state or perform calculations. They all help to better organize and manage the state of Vuex applications.
dispatch dispatch in vuex
is a method in Vuex used to trigger an action. Action is a mechanism for handling asynchronous operations and business logic. It can contain any JavaScript code and can trigger mutations to modify state.
Use the dispatch method to trigger an action in the component and pass some parameters to the action. Inside an action, you can perform asynchronous operations, such as sending network requests, processing data, and then triggering related mutations to update the application's state when needed.
Example:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({ state: { count: 0, }, mutations: { increment(state) { state .count++; }, }, actions: { asyncIncrement(context) { // Simulate asynchronous operations, such as sending network requests setTimeout(() => { context.commit('increment'); // Trigger mutation to increase count }, 1000 ); }, }, });
// Trigger action in the component
store.dispatch('asyncIncrement'); // Increase count after 1 second.
In the above example, we created an action named asyncIncrement, which contains an asynchronous setTimeout operation. When store.dispatch('asyncIncrement') is called, it triggers an increment mutation to increment the count after one second. This way, we can use the dispatch method to trigger an asynchronous operation and update the application's state after the operation is completed.
In short, the dispatch method is a tool for triggering actions in Vuex, which allows you to perform asynchronous operations in components and interact with the state of the application. This helps to better manage and organize business logic in Vuex applications.