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
<style lang="scss" scoped> style标签就可以正常使用scss语言了
5.最后展示一下创建出来的项目目录
至此《vite 搭建 js+vue3 全家桶》系列全部完成, 其中包括vite创建vue3的js项目,集成vue-router+vuex+axios+sass的安装是使用方法,按照此方式已经搭建起一个基础的简单的项目结构。下一篇打算在这个项目中引入iconfont和elementui