vue3学习（七）

news2025/1/13 10:00:03

前言

接上一篇学习笔记，今天主要是分享上次学习完了，还没来得及记录，趁今天晚上换换脑子的时间记录下。
今天主要是记录的vuex文件的拆分，因为毕竟如果只在一个index.js文件写，文件会随着业务的复杂性上升，显得乱的很。另外简单的对了个开放接口，演示异步修改。

一、拆分后目录

在这里插入图片描述
其实主要就是store目录下index.js文件拆分state.js、actions.js、mutations.js（文件拆分）
modules目录则是按模块拆分，每个模块一个js文件。

二、vuex拆分知识点

在这里插入图片描述

三、拆分示例

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld/>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import VuexStore from "./store";

const app = createApp(App)
app.use(VuexStore)
app.mount('#app')

组件HelloWorld.vue

<template>
  <div class="hello">
    <p>demo author:{{ author }}</p>
    <h1>list 数据</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        <p>{{ item.name }} | {{ item.age }} | {{ item.sex }}</p>
      </li>
    </ul>
    <p>辅助函数读取nickname：{{ nickname }}</p>
    <p>辅助函数读取localCurAge：{{ localCurAge }}</p>
    <p>修改Author：<input  @keyup="changeAuthor($event.target.value)"/></p>
    <p>辅助函数方式修改Author：<input  @keyup="setAuthor($event.target.value)"/></p>
    <p>异步修改Author:<input @change="syncChangeAuthor($event.target.value)"></p>
    <p>辅助函数方式异步修改Author:<input @change="loadUserInfo($event.target.value)"></p>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from "vuex";

export default {
  computed: {
    localCurAge: {
      get() {
        return 18;
      },
    },
    ...mapState(["author", "nickname", "list"]),
  },
  methods: {
    changeAuthor(value) {
      //方式一，使用commit提交
      this.$store.commit("setAuthor", value);
    },
    ...mapMutations(["setAuthor"]),
    syncChangeAuthor(value) {
      //方式二，使用dispatch提交，触发一个动作action
      this.$store.dispatch("loadUserInfo", value);
    },
    ...mapActions(["loadUserInfo"]) //映射为本地方法
  },

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

store目录下
index.js

import {createStore} from 'vuex'
import state from "./state"
import mutations from "./mutations"
import actions from "./actions"


const modules = {}

const vuexStore = createStore({
    //用来存储状态数据
    state: state,
    mutations: mutations,
    actions: actions,
    modules: modules
})


export default vuexStore

actions.js

import axios from "axios";

export default {
    async loadUserInfo(context, username) {
        //第一个参数是上下文对象，第二个参数是传递过来的值，loadUserInfo是自定义的方法名，第一个对象是一个与store具有相同属性和方法的对象
        const loadUserInfoUrl = "https://gitee.com/api/v5/users/" + username;
        console.log(loadUserInfoUrl)
        const {data} = await axios.get(loadUserInfoUrl);
        console.log(data)
        //调用mutations中的方法（必须这样处理）
        context.commit('setAuthor', data.name)
    }
}

mutations.js

//用来改变状态数据，必须是同步操作
export default {
    //第一个参数是state，第二个参数是传递过来的值，setAuthor是自定义的方法名
    setAuthor(state, newValue) {
        state.author = newValue
    }
}

state.js

//定义一个对象，用来存储状态数据
export default {
    author: '韦小宝',
    nickname: '肥仔哥哥',
    list: [{
        name: 'tom',
        age: 1,
        sex: '男'
    },
        {
            name: 'jerry',
            age: 2,
            sex: '女'
        },
        {
            name: 'lili',
            age: 3,
            sex: '男'
        }]
}