【vue3.0】17.0 vue脚手架——router、vuex简介

安装软件vscode、最新版的nodejs、再通过npm安装nrm

npm install nrm -g

nrm ls

可以用国内的镜像源

使用方法：

nrm use taobao

image.png

先删掉电脑中老的脚手架：

npm uninstall vue-cli -g
yarn global remove vue-cli

安装vue-cli：

npm install -g @vue/cli

或者安装指定版本

npm install -g @vue/cli@4.5.9

对路由的理解router

路由是根据url的不同，展示不同的页面。

整个vue-cli的执行逻辑如下：

main.js中引入了router路由的执行。

组件是先执行App组件。
app组件中出现2个router-link，跳转路由的标签。负责展示当前路由对应的组件内容

router-link 跳转路由的标签指示
router-view  具体展示当前路由对应的组件内容

import语法

懒加载语法，异步加载内容。

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
//懒加载语法，异步加载内容。
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

但是懒加载可能页面切换的时候可能会感觉有一些卡顿。

vuex：vue数据存储方案

也就是main.js中的store：全局的操控。

import store from './store'

然后我们的store中的内容如下：

import { createStore } from 'vuex'

// 创建store
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

VueX可以描述为“数据管理框架”。
比如有几十个页面共用一套数据，这里就需要用到VueX。

如下就存入了一个全局的数据：

import { createStore } from 'vuex'

// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: {
    name:'dell'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

怎么使用

//在某个vue中
this.$store.state.name

怎么修改

vuex有一个机制，用于保证不能随随便便修改全局的共用数据。
比如如下这样是不行的：

this.$store.state.name="lee";

必须遵循vuex的一套机制：

      // 1. dispatch 方法，派发一个 action，名字叫做change
this.$store.dispatch('change');
      // 2. 感知到 change 这个action，执行store 中 actions 下面的 change 方法

      // 3. commit 提交一个叫做 change 的数据改变mutation 
      // 4. mutation 感知到提交的change改变，执行 change 方法改变数据

从上面第二部得知，需要修改store.js

import { createStore } from 'vuex'

// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: {
    name: 'dell'
  },
  mutations: {},
  actions: {
    // dispatch 和 actions 做关联
    change () {
    }
  },
  modules: {}
})

第三步是修改change方法：

import { createStore } from 'vuex'

// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: {
    name: 'dell'
  },
  mutations: {
     change() {
     }
},
  actions: {
    // dispatch 和 actions 做关联
    change () {
//commit 提交一个叫做 change 的数据改变mutations
        this.commit('change');
    }
  },
  modules: {}
})

第四步mutations被执行，第五步，在mutations中修改数据。

import { createStore } from 'vuex'

// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: {
    name: 'dell'
  },
  mutations: {
     change() {
        this.state.name="lee";
     }
},
  actions: {
    // dispatch 和 actions 做关联
    change () {
//commit 提交一个叫做 change 的数据改变mutations
        this.commit('change');
    }
  },
  modules: {}
})

怎么优化修改的写法

如果只是同步地修改而不是异步修改，以上流程可以简化如下：
某个vue中的方法

 this.$store.commit('change');

store.js

import { createStore } from 'vuex'

// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: {
    name: 'dell'
  },
  mutations: {
    change () {
      setTimeout(() => {
        this.state.name = 'lee'
      }, 2000)
    }
  },
  // actions: {},
  modules: {}
})

当然，还可以直接把数据传递过去：

<template>
  <div class="about">
    <h1 @click="handleClick">This is an about page</h1>
    <h1>{{myName}}</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  computed: {
    myName() {
      return this.$store.state.name;
    }
  },
  methods: {
    handleClick() {
      this.$store.commit('change', 'hello world');
    }
  }
}
</script>

在store.js中,就能收到传递过来的值：`

import { createStore } from 'vuex'
// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: { name: 'dell' },
  // mutation 里面只允许写同步代码，不允许写异步代码
  // commit 和 mutation 做关联
  mutations: {
    change(state, str) {
      state.name = str;
    }
  },
  // dispatch 和 actions 做关联
  actions: {
    change(store, str) {
      //隔2秒之后触发修改
      setTimeout(() => {
        store.commit('change', str)
      }, 2000)
    }
  }
})

modules可以参考如下文章：
vuex深入理解 modules

CompositionAPI中如何使用vueX

修改一个vue文件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1 @click="handleClick">{{name}}</h1>
  </div>
</template>

<script>
import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  name: 'Home',
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
    const handleClick=()=>{
        store.commit("changeName","hello")
    return { name ,handleClick}
  }
}
</script>

useStore就是我们要用的组件内容。

修改\src\store\index.js:

import { createStore } from 'vuex'
export default createStore({
 state: { name: 'dell' },
 mutations: {
   changeName(state, str) {
     state.name = str;
   }
 },

})

如果想要异步方法去修改的话，代码如下：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>{{name}}</h1>
  </div>
</template>

<script>
import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  name: 'Home',
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
     const handleClick=()=>{
        store.dispatch('getData')
     }
    return { name ,handleClick}
  }
}
</script>

修改\src\store\index.js:

import { createStore } from 'vuex'
export default createStore({
  state: { name: 'dell' },
  mutations: {
    changeName(state, str) {
      state.name = str;
    }
  },
  actions: {
    getData(store) {
      //可以操作比如远程获取数据
      setTimeout(() => {
        store.commit('changeName', 'hello')
      }, 2000)
    }
  }
})

axios请求远程数据

首先需要npm安装axios工具
当然，这里讲的不是普通的axios，而是结合vuex使用：
修改\src\store\index.js:

import { createStore } from 'vuex'
import axios from 'axios';
export default createStore({
  state: { name: 'dell' },
  mutations: {
    changeName(state, str) {
      state.name = str;
    }
  },
  actions: {
    getData(store) {
      axios.post('http://xxxxx')
      .then((response) => {
        const msg = response.data.message;
        store.commit('changeName', msg)
      })
    }
  }
})