vite

Vite 是一个基于 ES modules 的快速开发服务器和构建工具。它专为现代 Web 开发而设计，提供了许多优秀的功能，例如：

快速实时重载：支持在代码更改时极快地进行 HMR (热模块替换)，无需手动刷新页面。
模块化解析：支持原生 ES 模块加载，同时也能够支持 CommonJS、AMD 等其他主流模块化方案
内置优化：使用 Rollup 进行代码打包，生成高度优化的静态资源文件。
插件扩展：非常容易编写和使用插件，几乎可以对所有构建和开发任务进行定制。

Vite 还内置了开箱即用的 Vue.js 开发环境支持，因此非常适合创建 Vue.js 单页应用程序（SPA）和组件库。

你可以通过以下命令安装 Vite：

npm install -g vite

安装完成后，你可以使用 Vite 创建一个新的项目，并立即开始开发：

vite create vite --可更改项目名
cd my-project //打开项目终端
npm install   //安装所有的依赖
npm run dev  //运行项目

这将创建一个基本的 Vue.js 项目，并在 http://localhost:3000 上启动一个开发服务器。在修改文件时，Vite 会自动检测更改并重新编译，并在浏览器中显示最新的结果。

同时需要注意的是，使用 Vite 开发对前端的模块化发展有一定的要求，建议在确保项目支持 ES Modules (如使用 Babel 转换) 的前提下使用 Vite 进行开发。

vue2

Vue 2 是当前最广泛使用的 Vue.js 版本，它是一款轻量级、高性能的渐进式 JavaScript 框架。Vue 2 的核心是响应式系统和组件化开发模式。

以下是 Vue 2 的主要特点：

响应式数据绑定：Vue 2 可以将声明式的模板与对应的数据进行绑定，并且能够自动地追踪相关依赖，当数据变化时，会自动更新视图中的内容。
组件化开发：Vue 2 允许开发者将复杂的 UI 界面拆分成独立的、可重用的组件，并且提供灵活的组件通信机制。
虚拟 DOM：Vue 2 使用虚拟 DOM 技术来实现高效的渲染，通过 diff 算法可以尽可能地减少真实 DOM 操作，从而提升了性能。
模板编译：Vue 2 支持在浏览器中编译模板，并且提供了完善的编译工具链，包括单文件组件、Vue Loader 和 Vue CLI 等。
插件系统：Vue 2 提供了插件系统，允许第三方开发者扩展 Vue 的功能，例如 Vuex、Vue Router 等常用的插件。
生态丰富：因为 Vue 2 被广泛采用，所以在 Vue 2 的生态系统中有大量的插件和第三方库可供使用。
计算属性和侦听器：计算属性可以基于其他状态属性派生新的组合值，侦听器可以监听属性值的变化并执行自定义操作。
生命钩子函数：这些函数在组件的不同阶段执行，允许开发人员实现自定义行为（如初始化或销毁时）。

你可以通过包管理器（例如 npm 或 Yarn）来安装 Vue.js 2：

npm install vue@2.6.14

安装完成后，你可以在 HTML 页面中添加以下代码来创建一个简单的 Vue 应用程序：


<!DOCTYPE html>
<html>
<head>
  <title>My Vue App</title>
  <script src="https://unpkg.com/vue@2.6.14"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    });
  </script>
</body>
</html>

这将在一个 HTML 页面中创建一个简单的 Vue 应用程序，其中包含一个数据属性 "message"，它将被绑定到 h1 标签中。因为我们设置了 "el" 选项为 #app，Vue 将会将组件挂载到 ID 为 "app" 的 HTML 元素上。

可以看到，使用 Vue.js 2 构建应用程序非常简单，并且它能够帮助你更加容易地管理和组织你的代码，提高开发效率。

vuex

vuex 是一个 vue 的状态管理工具, ---状态就是数据
专为 Vue.js 应用程序开发的状态管理模式和库。它解决了多个组件共享状态时的复杂性问题，让应用中的所有组件能够方便、可预测地访问和修改状态，并且确保状态的变化遵循一定的规则。

在一个典型的 Vuex 应用程序中，核心概念如下：

state： JavaScript 对象,给vuex提供唯一数据源,存储公共数据(状态);
getters：从 state 派生计算状态属性，类似计算属性;
mutations：同步地更改 state 数据的方法;
actions：声明异步操state 数据的方法作;

它可以使得应用程序的代码更加清晰、可维护，并且易于测试。例如，当两个组件需要访问同一个状态时，你可以将该状态存储在集中的 store 中，而不是让每个组件各自维护一个副本。这种方式带来的好处是，改变状态只需要更新 store 中的一个属性，不会牵扯到整个应用程序的状态变化，因此改变后表现更加可控。

vuex 能解决 多组件共享数据 的问题, 非常方便便捷
多组件的通用的共用数据, 适合存到 vuex

vuex 两大优势:

响应式变化
操作简洁 (vuex提供了一些简化语法的辅助函数, 这些辅助函数, 需要熟练掌握)

pnpm

pnpm 作为一种现代化的 JavaScript 包管理器-----利用依赖项目管理方式，具有以下几个优点：

磁盘空间占用更少：在 pnpm 中，每个包只被下载一次，并且使用符号链接将需要的内容放到每个项目的 node_modules 目录中。这可以避免在多个项目中存储重复的依赖项，从而减少磁盘空间的占用。
安装速度更快：由于 pnpm 使用了符号链接技术来组织依赖项，所以在更新和安装依赖项时可以更快地获取和处理文件。
更好的本地缓存：pnpm 将所有下载的 软件包 和 依赖项 保存在本地缓存中，在下次安装相同的依赖项时可以从本地缓存中提取它们，避免重新从远程仓库下载依赖。
多项目共享依赖项：与传统的包管理器不同，pnpm 可以共享保存在本地缓存中的依赖项，可以在多个项目之间使用同一份依赖项，这样可以进一步减少磁盘空间和网络带宽的占用。
兼容性更好：pnpm 在设计上考虑了与 npm 的兼容性，它可以识别并处理 npm 的包描述符和锁文件格式。

综上所述，pnpm 是一种功能强大且易于使用的 JavaScript 包管理器，是现代化前端开发工作流程的有力工具。

创建vite--vue2--vuex

打开终端

1 创建一个vue2项目

1. 安装 pnpm 和vite

 #npm i pnpm -g  --全局安装pnpm
 #pnpm i vite@latest -g  --用pnpm全局安装vite

都只有安装一次,以后需要用到pnpm和vite都不需要再次安装

2.创建vue2项目

 #pnpm create vite--可以更改项目名称

Vanilla 选择普通模式
JavaScript

创建一个基于 ViteJS 的项目，其中 pnpm 是一种现代化的 JavaScript 包管理器。

具体来说，在运行这个命令时，会自动下载并安装最新的 Vite 插件集、Vue.js 和相关依赖项，并生成一个包含基本配置的 Vue.js 项目模板。由于使用了 pnpm 这种现代化的包管理器，因此安装速度和空间占用更佳优化。

通过执行 pnpm create vite- 命令可以快速建立一个可用的基础项目，并且已经默认进行了热模块替换和构建等配置，方便开发人员快速开始使用 ViteJS 开发 Vue.js 应用程序。创建的项目结构如下

此时一个用vite创建的项目就可以查看了

$ pnpm dev //开启项目

3. 安装vue2插件

 pnpm i @vitejs/plugin-vue2 -D

 pnpm i vue\@2.7.14

pnpm i @vitejs/plugin-vue2 -D这个命令是使用 pnpm 包管理器安装名为 @vitejs/plugin-vue2 的 Vue.js 2.x 插件，同时将其作为开发依赖项（-D）安装到你的项目中。

更具体地讲，@vitejs/plugin-vue2 是一个用于与 Vue.js 2.x 集成 Vite 2 的插件，它包含了在开发过程中常用的功能，如Vue单文件组件（SFC）解析、样式处理等。通过在项目中使用该插件，可以轻松地编写和调试 Vue.js 2.x 应用程序。

pnpm i vue\@2.7.14使用 pnpm 包管理器安装 Vue.js 2.7.14 版本的命令。pnpm 是一个快速、磁盘空间占用小且安全的 Node.js 包管理器，旨在提高包的安装和更新速度。

注意，在某些情况下，你可能需要选择适合你的版本，或者再次尝试安装（例如，如果遇到网络错误或源问题）。如果你在安装时遇到进程无限挂起、死循环等问题，建议检查网络连接并清除缓存以解决问题。

安装的依赖包可以在package.json文件中查看

4.配置vite文件

在项目根目录下新建vite.config.js文件,配置里面的内容

配置如下

//1.引入
import vue from '@vitejs/plugin-vue2'
import { resolve } from 'path'

//2.配置
export default {
  plugins: [vue()],

  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  }
}

import vue from '@vitejs/plugin-vue2' 导入了使用 Vue.js 2.x的插件。 import { resolve } from 'path'引入Node.js 的 path 模块中的 resolve() 方法，用于将相对路径解析为绝对路径。

export default默认导出里面的模块

接下来的 Plugins:\[vue()] 将该插件作为Vite 插件进行注册，以便在自己的Vue 2.x应用程序中使用。

而 resolve{alias{"@":resolve(\_\_dirname,"./src")}} 则配置了解析器别名（alias），用于简化 import 模块的路径。在这个别名定义中，"@":resolve(__dirname,"./src") 是将 @ 路径别名映射到项目根目录下 /src 文件夹。

总之，这个 Vite 配置文件使用了 Vue.js 2.x 插件并对其实现了优化，并且通过设置解析器别名来更轻松地引入模块。

5. 创建APP.vue根组件和Vue根实例

在项目的根目录下,新建src文件夹,
1.新建一个App.vue
2.将原来的main.js移动到src里面,删除main.js原来的内容,在里面创建Vues实例

App.vue

在 Vue.js 应用程序中，App.vue 是一个具有重要作用的文件。它是应用程序的根组件，包含了页面的整体结构和布局，以及一些初始化配置信息。通常情况下，App.vue 文件放置在 src 目录下，它由三个部分组成：<template>、<script> 和 <style>。

下面是 App.vue 的示例代码：

<template>
  <div id="app">
     <!-- 页面内容 -->
    <h3>vite-vue2-vuex</h3>
    <h2>vite-vue2-vuex</h2>
     <div><div>
  </div>
</template>

<script>
export default {
    // 其他组件都嵌套在 App 组件中
  components: {},// 其他组件的名
  
  // 数据属性--注册数据
  data() {
    return {
    }
  },
  watch: {},
//   计算属性
  computed: {},
  // 生命周期钩子函数
  created() {},//数据渲染前--实列创建后
  mounted() {},//数据挂载后
  
  // 存储该组件中所有的方法的对象
  methods: {},
}
</script>

<style scoped>
/* css样式 */
</style>

<template> 部分定义了该组件的模板，通常包含了网页的整体结构，例如各种 HTML 标签和组件，还可以通过 Vue.js 的指令和表达式来控制页面元素的显示和行为。 ===>注意:如果有多条同级数据时,必须要有一个根组件<div><div>包裹,

<script> 部分定义了该组件的逻辑处理，包括组件的配置项、数据属性、计算属性、钩子函数、方法等。这部分代码使用了 JavaScript 进行编写，可以通过 export default 将该组件进行输出。

<style> 部分定义了该组件的样式，包括 CSS 样式和预处理器等。

总的来说，App.vue 提供了整个 Vue.js 应用程序的脚手架和入口，是一个非常重要的文件。它连接了不同的子组件和路由页面，并提供了基本的布局和样式。此外，在 App.vue 中也可以进行全局设置和初始化操作，例如引入第三方库或配置全局样式等。

Vue实例

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

使用 Vue.js 框架创建 Vue 实例。

首先，import Vue from 'vue'从 Vue 模块中导入了 Vue 构造函数。import App from './App.vue'，通过导入 ./App.vue 文件，即 Vue 组件，来处理页面视图逻辑。

在 Vue.config.productionTip 中设置为 false，可以禁止在控制台输出生产提示。

最后，通过使用new Vue()创建 Vue 根实例，并将 render 函数作为参数传递。其中，render 函数是渲染函数，用于生成虚拟 DOM 的函数对象。

在 render 函数中，h 是 createElement 函数的别名，该函数用于创建 VNode（虚拟节点）并根据 VNode 渲染出真实的 DOM 树。h(App) 的意义是使用 App 组件作为根组件进行渲染。

最后通过 $mount('#app') 将 Vue 根实例挂载到 HTML 文档中的指定元素上，#app 代表 HTML 页面中 id 为 app 的元素。

更改index.html中main.js路径

此时开启项目pnpm dev如下所示

2. vuex仓库

1.安装vuex

pnpm i vuex\@3.6.2

2.初始化空仓库

src下新建store文件夹,里面新建index.js文件,

1.通过new Vuex.Store()创建vuex仓库, index.js代码如下

import Vue from 'vue'
import Vuex from 'vuex'

//注册vuex
Vue.use(Vuex)

//创建一个仓库
const store=new Vuex.Store(
    //仓库数据,
    {
        state:{ },//-状态-公共数据
        getters:{}, //类似于计算属性,
        mutations:{},//同步处理数据
        actions:{ }//异步处理数据
    }
)


//导出数据
export default store

2.在main.js中接收导出的index.js文件,并把index.js挂载到全局

import Vue from 'vue'
import App from './App.vue'

//1.导入index.js
import store from "@/store";// 可以省略index.js

Vue.config.productionTip = false

//2.全局注册
new Vue({
  render: h => h(App),
  store // 所有组件都能访问到store这个仓库
}).$mount('#app')

3.vuex的核心概念

1.state

在 Vuex 中，state 是一个对象，它提供唯一的公共数据源,当 store 中的 state 发生变化时，所有依赖于该 state 数据的组件都会自动响应并进行重新渲染，从而同步显示最新的数据。因此，使用 Vuex 来管理组件之间共享的状态，能够提高应用程序的状态管理和设计效率。

下面用state对象给vuex添加公共状态(数据)

import Vue from "vue";
import Vuex from "vuex";

//注册vuex
Vue.use(Vuex);

//创建一个仓库
const store = new Vuex.Store(
  //初始化数据
  {
    state: {
      count: 100,
      title: "vuex",
    },
  
  }
);

获取state数据的方法有\$store和mapState辅助函数2种

1.通过$store直接访问数据

<template>
  <div id="app">
     <!-- 页面内容 -->
    <h3>vite-vue2-vuex</h3>
    <h2>vite-vue2-vuex</h2>
    
    <!-- 通过$store直接调用vuex仓库数据 -->
    <div>count:{{ this.$store.state.count}}</div>
    <div>count:{{ this.$store.state.title}}</div>
  </div>
</template>

因为在main.js中,进行了全局注册,所以组件直接通过this.\$store.state.count可以直接访问到vuex仓库数据

2.通过mapState辅助函数访问

<template>
  <div id="app">
    <h3>vite-vue2-vuex</h3>

    <!--3.在页面上展示数据  -->
    <div>count:{{ count}}</div>
    <div>count:{{ title}}</div>
  </div>
</template>

<script>
//1.将引入vuex中的mapState
import { mapState } from "vuex";
export default {
  
//   计算属性
  computed: {
    //2. mapState用扩展运算符将vuex中的数据映射到computed属性上
    ...mapState(['count','title'])
  },

}
</script>

<style scoped>
/* css样式 */
</style>

第一步,导入 vuex 中的辅助函数 mapState，

第二步,利用mapState函数将 store 中的状态对象映射到组件实例中的计算属性上。上面代码就将 Vuex 中的 state 对象中的 count 和 title 字段映射为了组件实例的计算属性。

使用 ... (扩展运算符)的优点

将其扩展到组件对象的 computed 属性里面，使得组件能够很容易地访问在 store 中定义的全局状态(将对象的所有属性和方法展开作为新对象的属性和方法)。
组件中定义其他的计算属性或方法,可以直接定义在computed的对象上

这样做的好处是让我们可以在组件中使用类似于仅读的本地计算属性的方式来获取全局状态，而无需编写太多模板代码或手动订阅变化。 mapState 函数是在组件中使用 Vuex 状态时的一个常用工具函数。它简化了在组件中获取全局状态的操作，提高了代码的灵活性和可维护性。

2.mutations

mutations函数同步处理state数据,是唯一可以修改state数据的方法

同步处理的原因:遵循单向数据流规则,组件中不能直接修改仓库的数据,保证数据的可跟踪性,方便vue-devtool记录调试。

在vuex中会使用strict: true,严格模式,限制组件操作仓库数据-state

在 Vuex 中，mutations 用于修改 state 中的数据。它们是一个纯函数（即不应该执行异步操作或副作用），可以接受两个参数：第一个参数是当前的 state 对象，第二个参数是负载数据(payload),负载数据就是要更新的数据-->最多能传2个参数,如果是多个payload,就封装成一个对象,把对象整体作为payload;

payload

只有一个payload,直接当做第二个参数传递就可以
多个payload,封装为一个对象传递

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store(
  {
  // 严格模式，如果(子组件)操作了state数据，报错Error
    strict: true,
    
    state: {
      count: 100,
      title: "vuex",
    },
    //里面定义 修改state数据的方法
   mutations: {
        //1.只有一个payload
      addCount(state,n) {
        state.count += n;
      },
      //2,多个payload,
      changeObj(state, obj) {
        state.title = obj.txt;
        state.count = obj.mun;
      },
    },
  }
);

组件使用修改数据的方法
方法1:用mapState函数引入修改数据的方法

<template>
  <div id="app">
    count: {{ count }} 
    title:{{ title }}
   
    <button @click="countAdd(5)">count+5</button>
    <button @click="countAdd(10)">count+10</button>
    <button @click="change(6)">更改count和title</button>
  </div>
</template>

<script>
//1.将引入vuex中的mapMutations函数中
import { mapState } from "Vuex";
export default {
    computed:{
  ...mapState(['count','title'])
},
  methods: {
    // //2.映射
    // ...mapMutations(["addCount", "change"]),

    //3.监听事件 触发 提交请求
    //一个payload
    countAdd(n) {
        this.$store.commit('addCount',n)

    },
    //多个payload
    change(n) {
         this.$store.commit('changeObj',{
            mun:n,
            txt:'学习vuex'
         })    
    },
  },
};
</script>

<style scoped>
/* css样式 */
</style>

方法2:用mapMutations函数引入修改数据的方法

<template>
  <div id="app">
  
    count: {{ $store.state.count }} 
    title:{{$store.state.title }}
  
    <button @click="countAdd(5)">count+5</button>
    <button @click="countAdd(10)">count+10</button>
    <button @click="change(6)">更改count和title</button>
  </div>
</template>

<script>
//1.将引入vuex中的mapMutations函数中
// import {mapState  } from "Vuex";
import { mapMutations } from "Vuex";
export default {
//     computed:{
//   ...mapState(['count','title'])
// },
  methods: {
    // //2.映射
    ...mapMutations(["addCount", "changeObj"]),

    //3.监听事件 触发 提交请求
    countAdd(n) {
        this.$store.commit('addCount',n)

    },
    change(n) {
         this.$store.commit('changeObj',{
            mun:n,
            txt:'学习vuex'
         })    
    },
  },
};
</script>

<style scoped>
/* css样式 */

3.actions

异步处理state的数据,处理结束后,提交mutation修改数据

action中不能直接修改state数据,异步操作，放到actions中处理！actions处理异步逻辑，处理完了，提交mutation，mutation修改数据。action可以包含任意异步操作

import Vue from "vue";
import Vuex from "vuex";

//注册vuex
Vue.use(Vuex);

//创建一个仓库
const store = new Vuex.Store(
  //仓库数据,
  {
    state: {
      count: 100,
      title: "vuex",
    },
    //里面定义修改数据的方法
    mutations: {
        
      changeObj(state, obj) {
        state.title = obj.txt;
        state.count = obj.mun;
      },
    },
   //actions异步处理
    actions:{
        //第1个参数, context 上下文对象，这里指的是store中的state, 一般可以简写 ctx
         //第2个参数,修改的数据 
         //action中不能直接修改state数据，还是得提交(commit)给mutation 
        asyncState(ctx,payload){
            setTimeout(() => {
                //提交给mutation处理,请求changeObj方法,修改state数据
                ctx.commit('changeObj',payload)
            }, 1000);
          }
    }
  },
  
);

//导出数据
export default store;

在组件中使用异步处理数据的方法,
方法1.通过mapState引入方法,

<template>
  <div id="app">
    <h3>vite-vue2-vuex</h3>
    count: {{ count }} title:{{title }}
   
    <button @click="change(5)">1秒后执行</button>
  </div>
</template>

<script>
//1.将引入vuex中的mapMutations函数中
import {mapState  } from "Vuex";
export default {
    computed:{
  ...mapState(['count','title'])
},
  methods: {

    change(n) {
         this.$store.dispatch('asyncState',{
            mun:n,
            txt:'学习vuex'
         }) 
    },

   
  },
};
</script>

方法2.通过mapActions辅助函数

<template>
  <div id="app">
    <h3>vite-vue2-vuex</h3>
    count: {{$store.state. count }} title:{{$store.state.title }}
   
    <button @click="change(5)">1秒后执行</button>
  </div>
</template>

<script>
//1.将引入vuex中的mapActions函数中
import {mapActions  } from "Vuex";
export default {

  methods: {
  ...mapActions (['asyncState'])  ,       
    change(n) {
         this.$store.dispatch('asyncState',{
            mun:n,
            txt:'学习vuex'
         }) 
    },

   
  },
};
</script>
<style scoped>
/* css样式 */
</style>

4.getters

getters类似于计算属性,返回计算后的结果

import Vue from "vue";
import Vuex from "vuex";

//注册vuex
Vue.use(Vuex);

//创建一个仓库
const store = new Vuex.Store(
  //仓库数据,
  {
    state: {
      count: 100,
      title: "vuex",
      arr:[5,7,3,95,100]
    },
    //计算属性
    getters:{
    //筛选得到大于等于95的值-->[95,100]
        filterArr(state){
        //返回计算后的结果
          return  state.arr.filter(item => item >=95)
        }
       
    }
    }

组件内访问getter,使用mapGetters辅助函数

<template>
  <div id="app">
  
!-- 3.直接调用方法-得到计算后的值 -->
  <h4>{{filterArr}}</h4> 
  </div>
</template>

<script>
//1.将引入vuex中的mapGetters函数中
import {mapGetters } from "Vuex";
export default {

 computed: {
 //2.映射到computed属性上
    ...mapGetters(['filterArr']),
  }
};
</script>

<style scoped>
/* css样式 */
</style>

还有可以通过,$store.getters.filterArr直接访问 getters

<template>
  <div id="app">
   
   <h3>{{$store.getters.filterArr}}</h3>
    
  </div>
</template>

4. 分模块-module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。,所有的state(状态)的更新、操作都放到一起,项目,过大时,很难维护--->分模块

1. 模块定义-准备state

定义两个模块user和control

user中管理用户的信息状态 modules/user.js

export default{
    //user 用户模块
    namspced:true,//需要开启命名空间
    state:()=>({
       username:'userModule',
       age:88,
       like:'学习vuex'
    }),
    getters:{
        upperCaseName(state) {
            // state指的是当前模块中的state
            //转大写
            return state.username.toUpperCase()
        }
    },
    mutations:{
          // updateXXX()
         updateUser(state, payload) {
            state.username = payload
        }
    },
    actions: {
        // ctx ==> 模块中，代表的是当前模块的store
        updateTheme(ctx, payload) {
            console.log(ctx)
            setTimeout(() => {
                // 要提交mutation
                ctx.commit('updateUser', payload)
            }, 1000)
        }
}

}

control中管理项目应用的名称 modules/control.js

export default{
    namspced:true,//需要开启命名空间
    //settings 用户模块
    state:()=>({
      title:'vuex',
     dasc:'描述vuex的学习'
    }),
    getters:{},
    mutations:{},
    actions:{}
}

挂载到全局

store/modules/index.js

import Vue from "vue";
import Vuex from "vuex";

//引入模块
import control from "./modules/control";
import user from "./modules/user";


Vue.use(Vuex);


const store = new Vuex.Store({
  //仓库数据,
 
   //modules模块
   modules: {
   //模块名
    user,
    control
}
});
// 导入模块之后，查看vue-devtool  Vuex 中 state是否有模块中的数据

//导出数据
export default store;

store/main.js

import Vue from 'vue'
import App from './App.vue'

//1.导入index.js
import store from "@/store";// 可以省略index.js

Vue.config.productionTip = false

//2.全局注册
new Vue({
  render: h => h(App),
  store // 所有组件都能访问到store这个仓库
}).$mount('#app')

查看vue-devtool Vuex 中 state是否有模块中

访问state

1.直接通过$store访问

<template>
  <div id="app">

   <h3>{{$store.state.user.username}}</h3>
   <h3>{{$store.state.control.title}}</h3>

    
  </div>
</template>

2.通过mapState函数访问

<template>
  <div id="app">
   
    <!-- 方法1.默认根级别的映射 -->
    <div>{{ user.username }}</div>
    <div>{{control.dasc}}</div>

    <!--方法 2. 直接映射到子模块  -->
    <div>{{ age }}</div>
    <div>{{title}}</div>
  </div>
</template>

<script>
//1.引入state状态到函数中
import {  mapState, mapMutations, mapActions, mapGetters  } from "vuex";
export default {
  computed: {
    //2.函数-扩展语法将状态都映射到组件的属性上,保证组件能够全局访问状态
    
    // 方法1. 默认根级别的映射  ...mapState(['xxx'])
    ...mapState(["user","control"]),
    

    // 方法2. 直接映射到子模块  这种形式 需要开启命名空间 namespaced:true , 建议开启！
  ...mapState("user", ["username", "age", "like"]),
   ...mapState("control", ["title", "dasc"]),
  },

  // },
};
</script>
<style scoped>
/* css样式 */
</style>

开启命名空间namespaced:true,可以直接访问子模块中的属性

2分模块后访问getters,mutations,cations

getters

1.直接用 $store.getter( ['模块名/xxx']

<template>
  <div id="app">
  
    <!-- 访问getters方法 -->
    <!-- 1.直接用 $store.getter( ['模块名/xxx']  -->
    <div>{{$store.getters['user/upperCaseName']}}</div>
    <div>{{$store.getters['control/upperCaseName']}}</div>

  </div>
</template>

2.借助mapGetters函数

<template>
  <div id="app">
  
    <!-- 访问getters方法 -->

    <!-- 借助 mapGetters函数-->
    <div>{{upperCaseName}}</div>
    <div></div>

  </div>
</template>

<script>
//1.引入state状态到函数中
import {  mapGetters  } from "vuex";
export default {
  computed: {
    //2.函数-扩展语法将状态都映射到组件的属性上,保证组件能够全局访问状态

    // getters
    // 子模块的映射，mapGetters('模块名', ['xxx'])
    ...mapGetters('user', ['upperCaseName'])
  },

mutations

1.直接用$store访问

 <!-- 1.直接用 $store.getter( '模块名/xxx',参数)  -->
    <div>{{$store.commit('user/updateUser','修改name')}}</div>

2辅助函数mapMutations

<template>
  <div id="app">
   <button @click="updateUser('用户名')">修改用户名</button>
  
  </div>
</template>

<script>
//1.引入state状态到函数中
import {   mapMutations} from "vuex";
export default {

  methods:{
    // mapMutations
    // 子模块的映射，mapMutations('模块名', ['xxx'])
    ...mapMutations('user', ['updateUser'])
  }

  // },
};
</script>
<style scoped>
/* css样式 */
</style>

cations

1.直接$store.访问

<template>
  <div id="app">
    <button @click="$store.dispatch('user/updateTheme', '用户名')">一秒后修改用户名</button>
  
  </div>
</template>

2.借助mapActions函数

<template>
  <div id="app">
 
    <!-- 借助 mapActions 函数-->
     <button @click="updateTheme('用户名')">一秒后修改用户名</button>
  </div>
</template>

<script>
//1.引入state状态到函数中
import {   mapActions } from "vuex";
export default {

  methods:{
    // mapActions
    // 子模块的映射，mapActions('模块名', ['xxx'])
    ...mapActions('user', ['updateTheme'])
  }

  // },
};
</script>
<style scoped>
/* css样式 */
</style>

用vite 创建一个vue2项目,使用vuex仓库