在ｖｕｅ项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话，有必要考虑引入ｖｕｅｘ来管理这些凌乱的状态，今天这边博文用来记录这一整个的过程，后台ａｐｉ接口是使用ｗｅｂｐａｃｋ－ｓｅｒｖｅｒ模拟的接口，这个前面的文章中有提到，需要的可以去翻阅。
整个的流程是在组件的ｃｒｅａｔｅｄ中提交ｄｉｓｐａｔｃｈ，然后通过ａｃｔｉｏｎ调用一个封装好的ａｘｉｏｓ然后再触发ｍｕｔａｔｉｏｎ来提交状态改变ｓｔａｔｅ中的数据，然后在组件的计算属性中获取ｓｔａｔｅ的数据并渲染在页面上
首先新需要在项目中安装ｖｕｅｘ：
运行命令 ｎｐｍ ｉｎｓｔａｌｌ ｖｕｅｘ －－ｓａｖｅ－ｄｅｖ
在项目的入口ｊｓ文件ｍａｉｎ．ｊｓ中
import store from './store/index'
并将ｓｔｏｒｅ挂载到ｖｕｅ上
new Vue({ el: '#app', router, store, template: '<App/>', render: (createElement) => createElement(App) })
然后看下整个ｓｔｏｒｅ的目录结构，ｍｏｄｕｌｅｓ文件夹用来将不同功能也面的状态分成模块，ｉｎｄｅｘ．ｊｓ文件夹是ｓｔｏｒｅ的入口文件，ｔｙｐｅｓ文件夹是定义常量ｍｕｔａｔｉｏｎ的文件夹
整个ｖｕｅｘ的目录结构如下：
这里我新建了文件夹ｆｅｔｃｈ用来编写所有的ａｘｉｏｓ处理和ａｘｉｏｓ封装
在ｆｅｔｃｈ文件夹下新建ａｐｉ．ｊｓ文件：
import axios from 'axios' export function fetch(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { alert('Api--ok'); resolve(response.data); }) .catch((error) => { console.log(error) reject(error) }) }) } export default { // 获取我的页面的后台数据 mineBaseMsgApi() { alert('进入api.js') return fetch('/api/getBoardList'); } }
在ｓｔｏｒｅ的入口文件ｉｎｄｅｘ．ｊｓ中：
import Vue from
转播
