学习搭建Vuex环境总结

本文介绍了如何在Vue项目中安装和设置Vuex,包括下载对应版本的Vuex,创建store文件管理状态、actions、mutations,以及在main.js中集成store。后续将深入探讨Vuex的基础使用。
摘要由CSDN通过智能技术生成

Vuex是一个在Vue中实现集中式状态(数据)管理的插件,用于对vue中应用多个组件的共享状态进行集中式的管理(读/写),同时它也是任意组件之间的一种通信方式。可以简单理解成我们把需要共享的数据放到Vuex中,组件就可以通过方法拿到这些数据做后续的处理。下面说一下搭建Vuex环境的步骤。

1.首先要下载vuex,在终端通过命令npm i vuex进行下载!!(注意请阅读完再下载),下载之前请先确认好自己使用的是Vue的什么版本,Vue在使用Vuex时有版本要求,vue2中要用vuex3的版本的,vue3中要用vuex的4版本的,确认好之后,比如想下载vuex的3版本命令是:npm i vuex@3 ,其他版本同理。

2.第二步创建一个文件,基本路径:src/store/index.js,这个文件的作用是将vuex引入、应用、准备好基础需要的对象。

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex程序
Vue.use(Vuex)

//准备actions对象---响应组件中用户的动作
const actions = {}
//准备mutations对象---修改state中的数据
const mutations = {}
//准备state对象---保存具体的数据
const state = {}

//创建并暴露store
export default new Vue.Store({
	actions,
	mutations,
	state
})

3.第三步在main.js中创建vm时传入store配置项。

......
//引入store(引入上面创建的文件,路径:src/store/index.js)
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

这样就把基本Vuex环境搭建好啦,后续还会写关于Vuex基础的使用文章。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值