Vuex详细介绍和使用方法

最新推荐文章于 2024-04-07 17:55:26 发布

一个橙子呀

最新推荐文章于 2024-04-07 17:55:26 发布

阅读量459

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/hong521520/article/details/120269150

版权

Vuex是Vue.js应用的状态管理模式，用于集中管理项目中复杂组件的状态。它提供单一数据源，通过Getters派生新状态，通过Actions处理异步操作并提交Mutation同步更新State。在项目中，安装Vuex后，需在src目录创建store，定义状态、Mutation、Action和Getters，并在组件中通过提交Action来更新状态。

摘要由CSDN通过智能技术生成

1.什么是vuex？

官方的解释： Vuex是一个专为Vue.js应用程序开发的状态管理模式

当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。常用的登录，购物车等一些数据的存储
在这里插入图片描述
State：唯一的数据源，我们需要把任何一个组件中需要抽取出来的变量放入到state中去

Getters：通过Getters可以派生出一些新的状态

Mutations：更改Vuex的store中的状态的唯一方法

Actions：Action提交的是mutation，而不是直接变更状态。Action可以包含任何的异步操作, 但mutation必须是同步操作。

操作步骤： 当组件中的状态发生改变，通过dispatch函数提交到Actions，Actions再通过Commit函数提交到Mutations, 此时，状态发生改变都会实时的去渲染组件。

项目中如何使用vuex

1.安装vuex

cnpm install vuex --save

2.在src目录中，创建store文件，并创建vuex中模块的文件名，内容多的话建议全都拆开，便于管理模块。
在这里插入图片描述
3.然后在你的main.js文件引入

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

4.在你的index.js相当于vuex的主目录，文件都在index.js文件引入

import Vue from 'vue'
import Vuex from 'vuex'
import userInfo from './modules/userInfo';
import audioPlay from './modules/audioPlay';
import getters from './getters'