Vuex以及axios的使用

Posted caizhuang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex以及axios的使用相关的知识,希望对你有一定的参考价值。

Vuex简介

vuex是一个专门为Vue.js设计的集中式状态管理架构。

状态? 我们把它理解为在data中需要共享给其他组件使用的部分。

Vuex和单纯的全局对象有以下不同:

1、Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候,

  若store中的状态发生变化,那么相应的组件也会相应的得到高效更新。

2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的

  提交(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化,

  从而让我们能够实现一些工具来帮助我们更好的了解我们的应用

 

安装使用vuex

  --  npm install vuex

// main.js
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import vuex from ‘vuex‘

Vue.use(vuex)

Vue.config.productionTip = false

const store = new vuex.Store({
    state: {
      show: false,
    }
});

new Vue({
  el: ‘#app‘,
  router,
  store,
  components: { App },
  template: ‘<App/>‘
});

使用:
/ 为了方便维护,我们通常把在src下面新建一个store文件夹,
// 然后在里面新建一个index.js
import Vue from ‘vue‘
import Vue_x from "vuex"

Vue.use(Vue_x);

export default  new Vue_x.Store({
   state: {
      show: false,
    },
});
// 那么main.js要改成
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import store from "./store"

Vue.config.productionTip = false;

new Vue({
  el: ‘#app‘,
  router,
  store,
  components: { App },
  template: ‘<App/>‘
});

State


简而言之~~state是保存我们data中需要共享的数据。


由于Vuex的存储是响应式的,从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。


this.$store.state.count

组件中获取vuex中状态:

 

/ 创建一个组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count(){
      return this.$store.state.count
    }
  }
};

Getter

有时候我们需要从store中的state中派生出一些状态,例如对数据进行简单的计算。

并且很多组件都需要用到此方法,我们要么复制这个函数,要么抽取到一个公共函数,多处导入。

我们vuex提供了更加方便的方法,getter ,它就像计算属性一样,getter的返回值会根据它的依赖被

缓存起来,只有它的依赖发生改变时,才会重新计算。

Getter会接收state作为其第一个参数

Getter使用:

import Vue from ‘vue‘
import Vue_x from "vuex"

Vue.use(Vue_x);

export default  new Vue_x.Store({
   state: {
     count: 20,
   },
  // 通过 this.$store.getters.my_func
  getters: {
    my_func: function (state) {
      return state.count * 2
    }
  },

});
Getter也可以接收getters为第二个参数:

import Vue from ‘vue‘
import Vue_x from "vuex"

Vue.use(Vue_x);

export default  new Vue_x.Store({
   state: {
     count: 20,
   },
  // 通过 this.$store.getters.my_func
  getters: {
    my_func: function (state) {
      return state.count * 2
    },
    // 通过 this.$store.getters.my_func_count
    my_func_count: function (state, getters) {
      return getters.my_func.length
    }
  },

});


Mutation需要遵守Vue的响应规则


既然vuex中的store中的状态是响应式的,那么当我们状态变更时,监视状态的vue组件也会更新。


这就意味着vuex中的mutation也需要与使用vue一样遵守一些注意事项:


  -- 1,最好提前在你的store中初始化好所有的所需要的属性


  -- 2,当对象需要添加属性时,你应该使用


      --  Vue.set(obj, ‘newProp‘, 123)


      --  以新对象代替老对象  state.obj = { ...state.obj, newProp: 123}


axios的简单使用


基于Promise的HTTP请求客户端,可以同时在浏览器和node.js使用。


使用npm安装axios


  -- npm install axios -D


基本的配置

// main.js
import axios from "axios"

Vue.prototype.$axios = axios

// 组件中
methods: {
     init () {
        this.$axios({
             method: "get",
             url: "/user"
        })
    },
};

基本的使用

test(){
          this.$axios.get(this.$store.state.apiList.course,{
            params: {
              id: 123,
            }
          }).then(function (response) {
            // 请求成功回调函数
          }).catch(function (response) {
            // 请求失败的回调函数
          })
}

test(){
          this.$axios.post(this.$store.state.apiList.course,{
              course_title: "Python",
              course_price: "19.88"
          }).then(function (response) {
            // 请求成功回调函数
          }).catch(function (response) {
            // 请求失败的回调函数
          })
}

function getCourse(){
          return this.$axios.get(‘/course/12‘)
        }
function getCourse_all() {
          return this.$axios.get(‘/course‘)
        }
this.$axios.all([getCourse_all(),getCourse()])
          .then().catch()


methods: {
          init(){
            var that = this
            this.$axios.request({
              url: that.$store.state.apiList.course,
              method: ‘get‘
            }).then(function (data) {
              if (data.status === 200){
                  that.courseList = data.data
              }
            }).catch(function (reason) {
              console.log(reason)
            })
          }
},


 

 















以上是关于Vuex以及axios的使用的主要内容,如果未能解决你的问题,请参考以下文章

Vuex以及axios 看这个

vuex以及axios

Vuex 模块 CORS 错误中的 Nuxtjs Axios

如何使用 vuex 和 typescript 将 axios 调用移动到自己的方法中

Vuex 操作未将本地存储令牌添加到 Axios 调用后

vue-cli4 项目框架的搭建 以及 路由的封装axios的封装公共函数js文件的封装引用vuex的基本用法minins混入css以及字体图标和图片的引入等