vuex 安装/使用(英)-前端-E先生的博客
    首页 >> 互联网 >> 前端

vuex 安装/使用(英)


To use Vuex, which is a state management library for Vue.js applications, you need to install it and integrate it into your Vue project. Here are the steps for installing and using Vuex:

  1. Install Vuex:
    You can install Vuex using npm or yarn. Open your project's terminal and run one of the following commands:
    Using npm:

npm install vuex

Using yarn:

yarn add vuex
  1. Create a Vuex Store:
    In your Vue project, you need to create a Vuex store to manage your application's state. You can do this by creating a JavaScript file for your store. Let's call it store.js:

import { createStore } from 'vuex';

const store = createStore({
  state: {
    // Define your application's state here
  mutations: {
    // Define functions to modify the state
  actions: {
    // Define asynchronous actions here
  getters: {
    // Define computed properties here

export default store;

In the above code, you define the initial state, mutations, actions, and getters for your store.

  1. Integrate Vuex into Your Vue App:
    Open your main application file (usually main.js or main.ts), and integrate the Vuex store:

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // Import your Vuex store

const app = createApp(App);
app.use(store); // Use the Vuex store


This code imports the store and integrates it with your Vue app.

  1. Using State, Mutations, Actions, and Getters:
    In your Vue components, you can access and manipulate your application's state using the Vuex store. Here's how to use it in a component:

    <p>Counter: {{ $store.state.counter }}</p>
    <button @click="incrementCounter">Increment</button>

export default {
  methods: {
    incrementCounter() {
      this.$store.commit('increment'); // Commit a mutation

In the component, you can access the state with $store.state and commit mutations with $store.commit. You can also dispatch actions with $store.dispatch and use getters with $store.getters.

  1. Accessing State in the Template:
    You can access state properties directly in the template using the double curly braces ({{ }}). In the example above, we accessed counter from the state.

That's a basic overview of installing and using Vuex in a Vue 3 application. Vuex provides a centralized state management solution, and you can expand on it by adding more mutations, actions, and getters as needed for your application.




手   机:
内   容: