vite 搭建 js+vue3 全家桶 (三)

vite搭建了一套基础的包含vue-router、vuex、sass、axios的基于js项目，上篇已完成项目创建和vue-router、axios的集成，这篇集成vuex和sass，至此这个系列全部结束

下一篇打算在这个项目中引入iconfont和elementui

1.安装vuex

npm install vuex@next --save

2.src下创建store/index.js文件

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0,
      info: {
        name: "李喜喜",
        age: 30,
      },
    };
  },
  mutations: {
    sum(state, params) {
      state.count = params.num1 + params.num2;
    },
  },
  actions: {
    //模拟异步事件，第一个参数是上下文参数 包含state及其他store中的属性，第二个参数是dispatch传递的参数
    change({ state }, params) {
      new Promise((res, rej) => {
        setTimeout(() => {
          res({ name: "张张张", age: 25 });
        }, 1000);
      }).then((res) => {
        state.info.name = res.name;
        state.info.age = res.age;
      });
    },
  },
  getters: {},
  // state中信息过长时 用来将state进行分割
  modules: {},
});
export default store;

2.main.js中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'//引入路由
import store from '@/store/index'//引入vuex

createApp(App)
.use(router)
.use(store)
.mount('#app')

3.在src/components下创建组件TestState.vue方便进行测试vuex的使用

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";

//两个输入框中绑定的值
const num1 = ref(""); //输入框1
const num2 = ref(""); //输入框2
//通过这个方法获取到vuex实例
const store = useStore();
//两个输入框输入事件
const sum = () => {
  store.commit("sum", { num1: num1.value - 0, num2: num2.value - 0 });
};
//按钮【测试actions】点击事件
const change = () => {
  store.dispatch("change", { userid: "2334234" });
};
</script>

<template>
  <div class="state-page">
    <div class="btn-container">
      <!-- 数字输入框1 -->
      <input type="text" v-model="num1" @input="sum" />
      <div>+</div>
      <!-- 数字输入框2 -->
      <input type="text" v-model="num2" @input="sum" />
      <div>
        <span>=</span>
      </div>
      <!-- 两数相加的结果 -->
      <span> {
   
   { store.state.count }}</span>
    </div>
    <div>
      <h4>
        {
   
   { store.state.info.name }}---{
   
   { store.state.info.age
        }}    <button class='btn-cls' @click="change">测试actions</button>
      </h4>
    </div>
  </div>
</template>

<style  scoped>
h3,
h4 {
  text-align: center;
}
.btn-container {
  height: auto;
  text-align: center;
}
.mounted-res {
  color: red;
}
.btn-container input,
.btn-container span {
  flex: 1;
}
.btn-cls{
  padding: 4px;
  margin-left: 20px;
  border:1px solid #545050;
}
</style>

vuex集成测试完成

4.安装sass

Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖

npm install -D sass

5.最后展示一下创建出来的项目目录

至此《vite 搭建 js+vue3 全家桶》系列全部完成，其中包括vite创建vue3的js项目，集成vue-router+vuex+axios+sass的安装是使用方法，按照此方式已经搭建起一个基础的简单的项目结构。下一篇打算在这个项目中引入iconfont和elementui