vuex的安装
vuex并不是vue的内置工具;而是一个插件;需要安装
如果没有:
1. 安装: npm install vuex --save
2. 新建一个js文件:
import {createStore} from 'vuex'
export default createStore({
五个核心的概念
})
3. 在main.js内引入 新建一个js文件;
通过use挂载
vuex并不是适合所有的项目;只适合大型的项目
vue内的严格模式通过在vuex中设置属性strict为true开启、与state同级
strict: true, //开启严格模式
调用vuex中的五大核心
//调用vuex中的五大核心
import {computed} from 'vue'
import {useStore} from 'vuex'
const store = useStore()
let numApi = computed(()=>{
return store.state.num
})
let calcNum = computed(()=>{
return store.getters.getNum
})
const addHanlde = ()=>{
store.commit('addNum')
}
const changeNum = ()=>{
store.dispatch('actionChangeNum')
}
计算属性的set和get
计算属性的值不能直接更改;想要更改必须使用 get 和 set
vue3中通过以下方法来实现
import { ref, computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
// let num = computed(() => {
// return store.state.num
// });
let num = computed({
get(){
return store.state.num
},
set(val){
store.commit('changeNum',val)
}
})
ajax
发起ajax的步骤
1. 实例化核心对象 let 名称 = new XMLHttpRequest()
2. 建立链接 名称.open(请求方式(get/post/delete/head..),请求的链接/接口的地址,同步异步)
3. 发送请求 名称.send()
4. 接收返回的值 名称.onreadystatechange = function(){
接收值
}
例如
let ajax = new XMLHttpRequest() // 实例化核心对象
建立链接 ajax.open(请求方式,请求链接,同步或者异步(默认异步))
ajax.open('GET','https://api.it120.cc/small4/banner/list') // 建立链接
/**
* 发送请求 ajax.send()
*/
ajax.send() // 发送请求;如果有参数,在此处带参数
/**
* 接收值
* 就是监听 readyState状态值的变化
*/
ajax.onreadystatechange = function () {
if(ajax.readyState==4 && ajax.status==200){
console.log(JSON.parse(ajax.response));
}
}
- 我们使用的axios就是在ajax基础上的封装;我们使用promise 封装成 一个简易的axios
建议封装
function axios(method,url,data) {
return new Promise((resolve,reject)=>{
let ajax = new XMLHttpRequest()
ajax.open(method,url)
ajax.send(data)
ajax.onreadystatechange = function () {
if(ajax.readyState==4 && ajax.status==200){
resolve(JSON.parse(ajax.response))
}
}
})
}
axios('GET','https://api.it120.cc/small4/banner/list').then(res=>{
debugger
})