vuex以及axios

2022-10-13 11:35:18

内容回顾：

　　-- ES6常用语法
       -- 变量定义
       -- 模板字符串
       -- 类
       -- 函数
       -- 数据的解构
   -- vue的常用指令
       -- v-text
       -- v-html
       -- v-for
       -- v-if
       -- v-show
       -- v-on
       -- v-model
       -- v-bind
       -- 自定义指令
       -- 计算属性
       -- 获取DOM
       -- 指令修饰符
   -- 组件
       -- 注册
           -- 全局局部子组件
       -- 通信
           -- 父子子父非父子
       -- 混合
           -- mixins
       -- 插槽
           -- slot
   -- 路由
       -- 注册
           -- let routes= [{}.{}]
           -- 把routes注册到VueRouter对象中
           -- 把VueRouter对象注册到Vue实例对象中
           -- router-link
           -- router-view
       -- 路由的参数
           -- params， query
       -- 命名路由
           -- name
       -- 命名路由视图
       -- 子路由
       -- 手动路由
       -- 钩子函数
       -- $route $router 区别
   -- 生命周期
       -- 监听
           -- 字符串
           -- 数组
               -- 改变数组里的值是监听不到的
               -- app.$set(app.xxx, index, value)
           -- 对象
               -- app.$set(app.xxx, key, value)
               -- watch ==> deep: true
       -- beforeCreate
       -- created
       -- beforeMount
       -- mounted
       -- beforeUpdate
       -- updated
       -- beforeDestroy
       -- destroyed
   -- npm 包管理工具 node.js
       -- npm install xxx@0.0.0(latest) pm i
       -- npm uninstall xxx
       -- npm i npm@latest -g
       -- npm update xxx
       -- 项目管理
           -- 切换到工作目录下
           -- npm init -y
   -- webpack 打包上线
       -- 入口文件
       -- 出口文件
       -- webpack 4
           -- webpack 不独立存在
           -- npm i webpack webpack-cli
           -- 手动创建src目录
               -- index.js 默认入口文件
           -- 打包后自动生成 dist目录
               -- 放出口文件
           -- webpack mode development/p...
   -- vue-cli
       -- 下载vue-cli
           -- npm install vue-cli -g
           -- vue-cli@2.9.7
       -- 借助vue-cli帮助我们创建项目
           -- vue init webpack xxxx
               -- cd xxxx
               -- npm run dev
       -- npm run dev
           -- 没有node_moudels文件夹
               -- 切换到项目目录下
               -- npm install
               -- npm run build
               -- npm run dev

           -- xxxxx ... json .....
               -- npm cache clean --force
               -- 执行接下来的操作
           -- 没有package.json
               -- 没有切换到项目目录下

今日内容

　　我们安装了vue-cli之后，我们接下来将我们已经写的那个luffy的单页面项目迁移到vue-cli中来。

App.vue：

我们先把luffy部分的header部分先迁移进来。

我们先进入element官网http://element-cn.eleme.io/#/zh-CN将插件下载下来，

npm安装：npm i element-ui -S

下载完后，

my_header是一个组件所以我们在components中创建一个名为my_header的组件，

<template>
  <div class="luffy_header">
    <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt="">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router=‘is_router‘>
            <el-menu-item v-for="(item,index) in link_list" :key=‘index‘ :index="item.path">{{item.text}}</el-menu-item>
            <div class="register" _v-319a3b1b="">
                <span _v-319a3b1b="">登录</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                <span _v-319a3b1b="">注册</span>
            </div>
    </el-menu>
</div>
</template>

<script>
export default {
  name: ‘my_header‘,
  data(){
          return {
              activeIndex: "1",
              is_router:true,
              link_list:[
                  {text:‘首页‘,path:‘/home‘},
                  {text:‘免费课程‘,path:‘/freeclas‘},
                  {text:‘轻课‘,path:‘/lightclas‘},
                  {text:‘学位课‘,path:‘/degreeclas‘},
                  {text:‘智能题库‘,path:‘/questionbank‘},
                  {text:‘公开课‘,path:‘/publishclas‘},
                  {text:‘内部教材‘,path:‘/innerteach‘},
                  {text:‘老男孩教育‘,path:‘/laonanhai‘},
              ]
          }
        }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.luffy_header {
            /*position: fixed;*/
            /*top: 0;*/
            /*left: 0;*/
            width: 100%;
        }
.el-menu {
    display: flex;
    align-items: center; /*水平居中*/
    justify-content: center;  /*垂直居中*/
}
.luffy_header img {
          position: absolute;
          left: 80px;
          top: -4px;
          width: 118px;
          height: 70px;
          z-index: 999;
      }
</style>

在我们的首页部分有首页，免费课程，轻课等部分，这些部分是有路由的，所以我们在router文件的index.js文件下写路由，

这样将我们的路由一个个的写完之后，header部分就差不多迁移完了。但不要忘了将我们my_header注册进我们的App.vue里面。

按照同样的思路将my_footer部分迁移到项目中。

Vuex简介

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

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

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

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

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

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

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

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

安装使用vuex：

-- npm install vuex

使用方法一：

使用方法二：

// 为了方便维护，我们通常把在src下面新建一个store文件夹，
// 然后在里面新建一个index.js

import Vue from ‘vue‘
import vuex from ‘vuex‘

Vue.use(vuex);
//抛出一个vuex.store对象
export default new vuex.Store({
  state:{
    yangbo:‘从今往后，一心向前，不谈感情,‘,
  },
　getters:{
aaa:function (state) {
let a = state.yangbo ;
let b = a + ‘单枪匹马你别怕，一腔孤勇又如何，这一路你可以哭但不能怂。‘
    return b
  },
bbb:function (state, getters) {
let a = getters.aaa
     let b = a + ‘众里寻他千百度‘;
return b
  }
},
mutations:{
change:function (state, data) {
    state.yangbo = data
  }
}
})

// 那么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/>‘
});