Vuex 与axios 介绍
Vuex集中式状态管理架构
- 简单介绍：
vuex是一个专门为Vue.js设计的集中式状态管理架构。 我们把它理解为在data中需要共享给其他组件使用的部分。 Vuex和单纯的全局对象有以下不同： 1、Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候， 若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。 2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的 提交(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化， 从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。
3、或者可以说，它就是前端里面简单替代数据库来存储数据的一个架构；
- 安装使用：
- npm直接下载：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/>' });
- 将vuex解耦出来，放到src文件夹下的store.js文件里面:
// store.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/>' });
- Vuex.Store 对象中存在的三个属性：state，getters，mutations
- state：保存我们data中需要共享的数据
- 获取state中的数据最好的方法是使用 计算属性，因为计算属性可以存在内存中，读取速度快，正常的data 也可获取；
- 获取state的语法：this.$store.state.count
- 示例：
// 创建组件 const Counter = { template: `<div>{{ count }}</div>`, // 计算属性 computed computed: { count(){ return this.$store.state.count } } };
- getters：该属性对应的是一个对象，对象中存放函数，该函数的返回值会保存在内存中，但是，当函数中的依赖关系发生改变时，它的返回结果会随之改变；类如计算属性；
- 获取getters中对应的函数的值：this.$store.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 } }, });
- mutations：当想让store中的state的值的发生变化时，需要提交mutation中定义了的函数，才可发生变化；（更改store中的状态的方法）
- 每个mutations对应的函数都需要接收 一个字符串的事件类型(type)，和一个回调函数handler。
- 触发mutations中的函数的语法：this.$store.commit('定义的函数', 函数需要的值)；
- 示例：
import Vue from 'vue' import Vue_x from "vuex" Vue.use(Vue_x); export default new Vue_x.Store({ state: { count: 20, }, // 需要通过 this.$store.commit('increment', 10) mutations: { increment (state, n) { // 变更状态 state.count += n } } });
- mutations需要遵守Vue的响应规则
既然vuex中的store中的状态是响应式的，那么当我们状态变更时，监视状态的vue组件也会更新。 这就意味着vuex中的mutation也需要与使用vue一样遵守一些注意事项： -- 1，最好提前在你的store中初始化好所有的所需要的属性 -- 2，当对象需要添加属性时，你应该使用 -- Vue.set(obj, 'newProp', 123) -- 以新对象代替老对象 state.obj = { ...state.obj, newProp: 123}
axios （Ajax）
- 介绍：
基于Promise的HTTP请求客户端，可以同时在浏览器和node.js使用。
基本上就是又进行了一层封装的ajax
- 安装：
npm install axios -D
- 基本配置：
- 在Vue对象中加载 axios ： Vue.prototype.$axios = axios
// main.js import Vue from 'vue' import axios from "axios" Vue.prototype.$axios = axios
- 正常的 axios请求 基本上绑定在组件中的方法中；也就是用在 组件对象中的 methods属性中绑定的各种方法里面；例如，绑定点击事件发送GET请求到后台
// 组件对象： { name: "Home", data(){ return { test: "" } }, methods: { my_click: function (){ // 改变仓库中的数据 this.$store.commit("sale", "一块钱包年~~") }, // 绑定的点击事件： course_click: function () { // 这里需要注意 this的问题，axios支持链式操作， // 在操作中的this 会丢失当前对象，将当前对象提前赋值，好在后面继续使用 let that = this; this.$axios.request({ url: "http://127.0.0.1:8000/test/", // url: 发送到后台的地址； method: "get" // method: "发送的方式"； }).then(function (data) { // then: 当请求成功返回后执行这个函数； console.log(data.data); console.log(this); that.test = data.data }).catch(function (data) { // catch: 当请求失败返回时执行这个函数； console.log(data) }) } }, }
- this.$axios 中的 get，post，request，以及发送多个请求的方法all：
- get请求：
// 组件中的 methods： // this.$store.state.apiList.course = url信息 // params: 路径上附带的参数 ?id=123 test(){ this.$axios.get(this.$store.state.apiList.course,{ params: { id: 123, } }).then(function (response) { // 请求成功回调函数 }).catch(function (response) { // 请求失败的回调函数 }) }
- post 请求：
// 组件中的 methods： // this.$store.state.apiList.course = url信息 // {course_title:"Python"}... post请求的请求体数据 test(){ this.$axios.post(this.$store.state.apiList.course,{ course_title: "Python", course_price: "19.88" }).then(function (response) { // 请求成功回调函数 }).catch(function (response) { // 请求失败的回调函数 }) }
- request 请求方法：
// this.$axios.request({}) 方法中需要传入url 和method 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) }) } },
- all： 并发发送多个请求：
// 定义多个请求，将定义好的函数 放到数组中，当成参数传到下面的函数里 // 在组件中的methods中 用 this.$axios.all([请求1，请求2]) 函数 发过去； // then() 接受成功执行； // catch() 接受失败后执行； function getCourse(){ return this.$axios.get('/course/12') } function getCourse_all() { return this.$axios.get('/course') } this.$axios.all([getCourse_all(),getCourse()]) .then().catch()
