引言

最近写的我的项目波及组件间的通信，其中有一些材料是大部分组件都通用的，因而把它们抽取进去当成全局变量是最好的。在Vue我的项目中，state基本上意味着data，状态治理（State management)通常指应用层数据的治理。官网倡议咱们在小型利用中采纳一个简略的store模式即可。可怜的是，官网文档中的介绍过于简洁，而网上找到相干中文材料也很少，甚至呈现用store模式实现Vuex，天啦噜，这不就是把简略的问题复杂化了嘛。于是本文将要率领您如何应用简略的store模式。

创立Vue我的项目

首先应用Vue Cli创立一个Vue我的项目

vue create number-app

接下来会让你抉择dafault或者manual，咱们抉择default即可。

Vue CLI v4.4.6? Please pick a preset: (Use arrow keys)❯ default (babel, eslint)  Manually select features

一旦我的项目创立实现，您须要进入我的项目中，而后运行该我的项目。

cd number-appnpm run serve

应用浏览器关上http://localhost:8080/，当你看到下图时表明我的项目曾经胜利跑起来了。

不过咱们接下来并不需要HelloWorld.vue，您能够把它和App.vue里相干局部删去。

store.js

在src/文件夹下创立一个store.js文件，它将裸露一个store对象。

export const store = {  state: {    numbers: [1, 2, 3]，    text: ''  }，  addNumber(newNumber) {    this.state.numbers.push(newNumber);  }};

下面的numbers和text是咱们将要在多个组件中显示或操作的数据。须要留神，所有store中state的变更，都搁置在store本身的action中去治理，addNumber(newNumber)便是一个范例。

在组件中应用

在组件中，咱们须要import { store } from "../store.js";来引入store。在data中应用storeState: store.state来获取store中的state。

当初咱们创立一个NumberDisplay组件用来显示store中的数据。

<template>  <div>    <h2>{{ storeState.numbers }}</h2>    <p>{{ storeState.text }}</p>  </div></template><script>import { store } from "../store.js";export default {  name: "NumberDisplay",  data() {    return {      storeState: store.state    };  }};</script>

而后创立一个NumberSubmit组件用来增加新的数字到store中的number数组。应用store.addNumber来调用store中的addNumber，从而扭转store中的state

<template>  <div>    <input v-model="numberInput" type="number" />    <button @click="addNumber(numberInput)">     Add new number    </button>  </div></template><script>import { store } from "../store.js";export default {  name: "NumberSubmit",  data() {    return {      numberInput: 0    };  },  methods: {    addNumber(numberInput) {      store.addNumber(Number(numberInput));    }  }};</script>

当初您能够在页面上增加新的数字了。

应用axios

有很多时候你在构建利用时须要拜访一个API并展现其数据。做这件事的办法有好几种，而应用基于promise的HTTP客户端axios则是其中十分风行的一种。本文咱们将应用Numbers API，它将返回一些乏味的文本给咱们。

在Vue我的项目中应用axios，首先

npm install --save axios vue-axios

而后在main.js中加上

import Vue from 'vue'import axios from 'axios'import VueAxios from '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时却呈现了谬误Cannot read property 'get' of undefined：

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文件如下：

const axios = require('axios');export const store = {  state: {    numbers: [1, 2, 3],    text: '3 is the number of spatial dimensions we perceive our universe to have.'  },  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我的项目中应用简略的状态治理store，当您的我的项目足够简略时举荐您应用它而不是Vuex。同时咱们也接触了axios，这是一个弱小的工具。