在Vue项目中使用简单的全局存储和axios

简介最近写的一个项目涉及到组件之间的通信，其中一些通信是大部分组件通用的，所以最好抽取出来作为全局变量。在Vue项目中，状态基本就是数据的意思，状态管理（Statemanagement）通常指的是对应用层数据的管理。官方建议我们在小应用中使用简单的store模型。遗憾的是，官方文档中的介绍过于简洁，网上相关的中文资料很少，甚至Vuex都是以store模式实现的。天哪，这不是把一个简单的问题复杂化了吗。所以本文将指导您如何使用简易商店模式。创建一个Vue项目首先使用VueCli创建一个Vue项目vuecreatenumber-app接下来会要求你选择dafault还是manual，我们可以选择default。VueCLIv4.4.6？Pleasepickapreset:(Usearrowkeys)?default(babel,eslint)手动选择功能创建项目后，您需要进入项目并运行它。cdnumber-appnpmrunserve用浏览器打开http://localhost:8080/，当看到下图时，说明项目运行成功。但是我们以后不需要HelloWorld.vue了，你可以把它和App.vue中的相关部分删掉。store.js在src/文件夹下创建一个store.js文件，它会暴露一个store对象。exportconststore={state:{numbers:[1,2,3],text:''},addNumber(newNumber){this.state.numbers.push(newNumber);}}};上面的数字和文字是我们的数据，将在多个组件中显示或操作。需要注意的是，store中的所有状态变化都是在store自己的action中管理的。addNumber(newNumber)就是一个例子。在组件中使用在组件中，我们需要import{store}from"../store.js";介绍店家。在data中使用storeState:store.state获取store中的state。现在我们创建一个NumberDisplay组件来显示商店中的数据。然后创建一个NumberSubmit组件来向商店中的Thenumber数组添加新的数字。使用store.addNumber调用store中的addNumber改变store中的状态现在您可以向页面添加新数字。在构建应用程序时，很多时候需要访问API并显示其数据时使用axios。有几种方法可以做到这一点，使用基于promise的HTTP客户端axios是一种非常流行的方法。对于本文，我们将使用NumbersAPI，它将返回一些有趣的文本。要在Vue项目中使用axios，首先npminstall--saveaxiosvue-axios然后添加importVuefrom'vue'importaxiosfrom'axios'importVueAxiosfrom'vue-axios'Vue.use(VueAxios,axios)所以可以在Vue文件中通过以下三种方式使用axios：Vue.axios.get(api).then((response)=>{console.log(response.data)})this.axios.get(api).then((response)=>{console.log(response.data)})this.$http.get(api).then((response)=>{console.log(response.data)))})但是当我在store.js文件中使用axios时，我得到一个错误Cannotreadproperty'get'ofundefined:addNumber(newNumber){this.state.numbers.push(newNumber);this.axios.get('http://numbersapi.com/'+newNumber).then(response=>{this.state.text=response.data;console.log(response);})}，原因错误是store.js文件中的this.axios没有引用Vue实例，需要另外引入axios。完整的store.js文件如下：constaxios=require('axios');exportconststore={state:{numbers:[1,2,3],text:'3是我们认为宇宙拥有的空间维度数。},addNumber(newNumber){this.state.numbers.push(newNumber);axios.get('http://numbersapi.com/'+newNumber).then(response=>{this.state.text=response.data;console.log(response);})},};至此，我们已经完成了number-app。如果您的程序不能正常运行，请查看github上的源代码。总结通过本文，我们学习了如何在Vue项目中使用简单的状态管理存储。当你的项目足够简单时，建议你使用它而不是Vuex。同时我们也接触到了axios这个强大的工具。