在vue2项目中，组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下（后台获取数据存入vuex，组件之间共享数据），那么就需要用vuex来管理这些。

整个的流程是在组件的created中提交dispatch，然后通过action调用一个封装好的axios，然后再触发mutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数据并渲染在页面上

首先新需要在项目中安装vuex：

运行命令：npm install vuex --save-dev

在项目的入口js文件main.js中：import store from './store/index'

并将store挂载到vue上：

new Vue({ el: '#app', router, store, template: '<App/>', render: (createElement) => createElement(App) })

然后看下整个store的目录结构，modules文件夹用来将不同功能也面的状态分成模块，index.js文件夹是store的入口文件，types文件夹是定义常量mutation的。文件夹整个vuex的目录结构如下：

这里我新建了文件夹fetch用来编写所有的axios处理（这里是把axios封装了）并且在fetch文件夹下新建api.js文件：

import axios from 'axios' axios.defaults.headers.post['Content-Type'] = 'application/x-puted: { ...mapGetters([//...函数名 使用对象展开运算符将此对象混入到外部对象中 'getContextPathSrc' ]) },

这里的getContextPathSrc函数，在页面中可直接使用，如果在函数中使用，需要this.getContextPathSrc

2：最后在store中写getters函数：

const getters = { // 图片公共 src 的获取 getter函数：state=> state.数据名 getContextPathSrc: state => state.contextPathSrc, }

最后在页面渲染就可以了。。这样就完成了交互。可能有人会留意到上面的getters里的movieID函数有个if判断，最后

return localStorage.getItem('STORE_MOVIE_ID')

有人会好奇为啥用localStorage……这个我们也不想用，只是如果你的页面如果用户强制刷新一下的话，会有个很奇怪的事发生，就是数据全部取不到，后来是没办法才加的。

最后，希望这些讲解，对于初学者来说有帮助……别被vuex的官网整的云里雾里（ps：我初学时也云里雾里整不明白偷笑）。好了，下班啦，更多的内容，会慢慢跟大家分享。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。