vuex——状态管理插件（转）

最新推荐文章于 2025-03-18 20:48:32 发布

winner_corl

最新推荐文章于 2025-03-18 20:48:32 发布

阅读量405

点赞数

分类专栏： vue 文章标签： vuex

本文链接：https://blog.youkuaiyun.com/Sicily_winner/article/details/103996067

版权

本文介绍Vuex的使用，包括安装、在项目中的应用、Getters、Actions和Mutations的实战。通过实例详细讲解如何管理状态，演示如何通过Actions提交Mutation来改变State值，以及使用mapState、mapGetters、mapActions简化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在网上看到一篇很好关于vuex使用的文章（转）所以本知识要点按照那篇文章操作。我们在使用vuex插件的时候，一定要使用npm install --save vuex，不然程序会报错，并且提示你请安装。

☪ Getters

◆ ㊫ Demo实战

⒈/src/store/index.js

⒉/src/componet/HelloWorld.vue

⒊效果

☪ Actions & Mutations

◆ ？数据我们在页面是获取到了，但是如果我们需要修改count值怎么办

◆ ㊫ Demo实战

先正常输出vuex中的count值

☪ 需要指定加减的数值

☪ mapState,mapGetters,mapActions

？数组状态管理

适合比较复杂的项目

What is vuex？
为什么要使用状态管理？

如购物车信息，在淘宝的首页和个人中心等页面，同步显示和更新……vuex插件当数据发生变化，无论是计算还是watch都能够很好的实现；

统一的数据中心Store去维护各种状态数据，每一个组件在更新的时候，就通知数据中心Shared State，数据中心再去触发调用的对应组件。

► vuex状态管理〖实例〗

？如何安装vuex

npm install --save vuex（进入使用my-vuex执行语句）

？如何在项目中使用vuex

在src目录下创建store文件夹，在store文件夹下面创建index.js，实例化store数据中心（const store = new Vuex.Store({})）

/* index.js */

import Vue from 'vue'
import Vuex from 'vuex'

// 使用Vuex
Vue.use(Vuex)

// 创建Vuex实例
const store = new Vuex.Store({
	state:{
		count:1,
	},
})

export default store

安装vuex插件（npm install --save vuex）

mian.js入口处引入store，并且创建实例（import store from './store' & ,store）

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})