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 模块 CORS 错误中的 Nuxtjs Axios
如何使用 vuex 和 typescript 将 axios 调用移动到自己的方法中
vue-cli4 项目框架的搭建 以及 路由的封装axios的封装公共函数js文件的封装引用vuex的基本用法minins混入css以及字体图标和图片的引入等