【vuex的安装，v3调用五大核心，计算属性的set,get、ajax】

最新推荐文章于 2023-08-18 15:31:51 发布

原创最新推荐文章于 2023-08-18 15:31:51 发布 · 999 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

本文介绍了如何安装和配置Vuex，Vue.js的状态管理库。包括安装步骤、创建store的基本结构，以及如何在项目中使用Vuex进行状态管理。同时，还提供了计算属性的set和get方法的使用示例，并简要说明了AJAX的基础使用。

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
        })