vuex 是 vue 的一种数据管理方案

从路由开始说起

我们新开一个项目, 在创建项目的时候, 选上 vuex，bable,router

首先安装node.js<https://nodejs.org/zh-cn/> 并加速npm

命令 npm config set registry https://registry.npm.taobao.org

验证命令 npm config get registry

安装脚手架npm install -g @vue/cli

使用脚手架创建项目, 选择好要创建文件夹的路径,然后执行下面的命令vue create 项目名称

项目代码结构

所有的代码, 跟项目逻辑相关的代码, 写在 src 文件夹下

首先运行的是main.js这个文件

// 引入创建app的相关方法
import { createApp } from "vue";
// 引入组件的配置
import App from "./App.vue";
// 创建app, 绑定dom
createApp(App).mount("#app");

vue 路由安装

我们新建一个项目, 在项目创建的时候, 选择安装路由

所谓路由: 根据不同的 url, 显示不同的内容 路由的相关定义在src\router\index.js里面

const routes = [
	{
		path: "/",
		name: "Home",
                //这是同步加载路由的方式，如果组件里面inport引入了这里可以直接用
		component: Home,
	},
	{
		path: "/about",
		name: "About",
                //这是异步加载路由的方式，因为上面没有引入，这里需要 以箭头函数的形式加载
		component: () => import("../views/About.vue"),
	},
];

在 app.vue 里面, 我们发现两个新的标签, 分别是router-linker和router-view

<div id="nav">
	<!-- router-linker 是跳转路由的标签 -->
	<router-link to="/">Home</router-link> |
	<router-link to="/about">About</router-link>
</div>
<!-- router-view 负责展示当前路由对应的组件内容 -->
<router-view />

异步加载路由的含义, 就是只有跳转到指定 url 的时候, 才会加载组件, 不跳转不加载

同步加载路由, 不管是否跳转到指定的 url, 都是加载相关的组件

异步加载路由的优点: 节省网络性能, 缺点: 路由切换加载慢

同步加载路由的优点: 路由切换加载快, 缺点: 损耗网络性能

vuex 安装

vuex 是 vue 的一种数据管理方案

根据创建项目的方式创建一个项目，选择勾上vuex 如果我想修改vuex里面的数据呢? 比如我点击张三, 变成英文的zhangsan

改变全局变量必须遵循一定的规则

0. 派发(dispatch)一个action, 告诉vuex, 我接下来要做什么事情
1. store 感知到触发了一个changeName(action的名字)的action, 执行changeName
2. 提交一个commit, 触发一个mutation
3. 对应的mutation会执行
4. 在mutation中修改数据

vux里面定义存储数据和在其他组件调用并更改vux的代码如下

首先组件里面先告诉vuex要做什么，代码如下

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1>
      <span @click="handleClick">{{ username }}</span
      >您好，欢迎使用HomeView
    </h1>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  // 使用计算属性把存储在vuex(也就是store)里面的值调用
  computed: {
    username() {
      return this.$store.state.username;
    },
  },
  // 添加点击事件
  // 改变全局变量必须遵循一定的规则

  // 1. 派发(dispatch)一个action, 告诉vuex, 我接下来要做什么事情
  // 2. store 感知到触发了一个changeName(action的名字)的action, 执行changeName
  // 3. 提交一个commit, 触发一个mutation
  // 4. 对应的mutation会执行
  // 5. 在mutation中修改数据
  methods: {
    handleClick() {
      // 点击的时候，首先告诉（dispatch一个命令过去）vuex要做什么事
      this.$store.dispatch("changeName");
    },
  },
};
</script>

store下面的vuex中的代码如下

import { createStore } from "vuex";
//在vuex的state里面存储数据
export default createStore({
  state: {
    username: "zhangsan",
  },
  getters: {},
  mutations: {
    change() {
      console.log(
        "disaptch一个命令，actions感知到了并提交了一个commite，触发mutations,mutations即将改变"
      );
      this.state.username = "我改变了";
    },
  },
  actions: {
    //  2. store 感知到触发了一个changeName(action的名字)的action, 执行changeName
    // vuex里面的actions感知到派发的命令,派发的命令是changeName,就用这个changeName执行
    changeName() {
      // 提交一个commite,触发mutations
      this.commit("change");
    },
  },
  modules: {},
});