close

State 使用 Vuex 综合 Vue.js 指南和实际示例 进行管理

Vuex 是一个应用程序 state 管理库 Vue.js，允许您管理和同步 component 应用程序中不同的数据。 Vuex 实现了Flux架构，使得管理应用变得简单高效 state。

 

Vuex 包括 中的关键概念

1. State

in代表您的应用 state 程序 Vuex 的集中式数据存储。 它保存了需要在不同的应用程序之间共享的数据 component。 state 下面是定义 a in 的示例 Vuex： 

// Vuex store  
const store = new Vuex.Store({
  state: {  
    count: 0,  
    todos: []  
  }  
});

 

2. Mutations

Mutations 负责修改 state in Vuex. 它们是同步函数，以当前 state 和有效负载作为参数。 这是定义突变的示例 Vuex： 

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {  
    increment(state) {
      state.count++;  
    },  
    decrement(state) {
      state.count--;  
    }  
  }  
});

 

3. Actions

Actions 用于处理异步操作并分派 mutations 修改 state. 它们可以包含 API 调用、异步任务或复杂逻辑。 以下是在 中定义操作的示例 Vuex： 

// Vuex store  
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { /* mutations definition */ },
  actions: {  
    async fetchData({ commit }) {  
      const response = await fetch('https://api.example.com/data');  
      const data = await response.json();  
      commit('updateData', data);  
    }  
  }  
});

 

4. Getters

Getters 允许您检索和计算 state 从 Vuex 存储中导出的内容。 它们对于在将数据返回到 s 之前访问和操作数据很有用 component。 下面是在 中定义 getter 的示例 Vuex： 

// Vuex store  
const store = new Vuex.Store({
  state: { todos: [...] },
  getters: {  
    completedTodos(state) {  
      return state.todos.filter(todo => todo.completed);  
    },  
    todoCount(state) {  
      return state.todos.length;  
    }  
  }  
});

 

要安装 Vuex 到您的项目中 Vue.js，您可以按照以下步骤操作

步骤1： Vuex 通过npm或yarn 安装： 

npm install vuex

或者 

yarn add vuex

步骤2： store.js  在项目的根目录中 创建一个文件。 这是我们声明和管理应用程序的地方 state。

步骤 3： 在 store.js  文件中导入 Vuex 并创建一个新的 store 对象： 

import Vue from 'vue';  
import Vuex from 'vuex';  
  
Vue.use(Vuex);  
  
const store = new Vuex.Store({  
  // Declare your states, getters, mutations, and actions here  
});  
  
export default store;

第 4 步： 在 main.js  文件中导入商店并将其链接到您的 Vue 应用程序： 

import Vue from 'vue';  
import App from './App.vue';  
import store from './store';  
  
new Vue({  
  store,  
  render: h => h(App),  
}).$mount('#app');

第 5 步： Vuex 现在您已经在项目中 安装并设置了。 您可以在文件中 声明您的 state s、 getters、 mutations 和 ，并在您的 Vue 中使用它们 。 actions store.js component

例子：

在 store.js  文件中，您可以声明一个简单的 state 和突变的，如下所示： 

const store = new Vuex.Store({
  state: {  
    count: 0  
  },  
  mutations: {  
    increment(state) {
      state.count++;  
    }  
  }  
});

在 Vue 中 component，您可以 state 通过使用  和  函数来使用 和 突变： mapState mapMutations 

import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['count'])  
  },  
  methods: {  
    ...mapMutations(['increment'])  
  }  
};

通过这些步骤，您已成功安装 Vuex 并可以使用它来管理 state 您的 Vue.js 应用程序。

 

有了它 Vuex，您可以轻松、一致地管理应用程序 state。 它增强了代码的可维护性和可重用性，同时提供了结构化的数据管理方法。