Vue理解之路:如何在Vue项目中使用vuex

发布于:2022-07-24 ⋅ 阅读:(556) ⋅ 点赞:(0)

目录

1.首先安装vuex包,安装完之后开始配置

2.在src目录下创建一个文件夹store,在store文件夹中新建一个index.js文件

3.创建Vuex.store实例 :index.js中进行如下配置:​编辑

 4.向Vue实例注入store:main.js中进行如下配置: 

 5.配置完后就可以在任意组件中使用了 


在一个vue项目中使用vuex,需要根据项目来源分两种情况 :

第一种情况:在老项目中使用。 先额外安装vuex包,然后在配置。

第二种情况:在新项目中使用。 在配置vue-cli中创建项目时,就可以直接选中vuex项,这样就不用做任何配置了(脚手架会自动帮我们完成的)。具体如下图示:

这里我们主要说明第一种情况,在一个老项目中如何使用vuex,步骤如下:

1.首先安装vuex包,安装完之后开始配置

2.在src目录下创建一个文件夹store,在store文件夹中新建一个index.js文件

3.创建Vuex.store实例 :index.js中进行如下配置:

 4.向Vue实例注入store:main.js中进行如下配置: 

 5.配置完后就可以在任意组件中使用了 

在任意组件中,通过this.$store.state 来获取公共数据,在模板中,则可以省略this而直接写成: {{$store.state.属性名}}