安装软件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)
})
}
}
})
网友评论