关于vue.js:在Vue项目中使用简单全局store和axios

3次阅读

共计 2879 个字符，预计需要花费 8 分钟才能阅读完成。

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

首先应用 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-app
npm run serve

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

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

在 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>

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

有很多时候你在构建利用时须要拜访一个 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，这是一个弱小的工具。

正文完