理解Vuex【Vue】

news2024/10/6 18:23:28

5. vuex

5.1 理解vuex

5.1.1 vuex是什么

  1. 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
  2. Github 地址: https://github.com/vuejs/vuex

5.1.2 什么时候使用 Vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

5.1.3 案例

效果：
在这里插入图片描述
代码：
Count.vue组件

<template>
    <div>
        <h1>当前求和为：{{ $store.state.sum }}</h1>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="incremnt">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>

<script>
    export default {
        name: 'Count',
        data(){
            return {
                n: 1, //用户选择的数据
            }
        },
        methods: {
            incremnt(){
                this.$store.commit('JIA', this.n)
            },
            decrement(){
                this.$store.commit('JIAN', this.n)
            },
            incrementOdd(){
                
                this.$store.dispatch('jiaOdd', this.n)
                
            },
            incrementWait(){
                
                this.$store.dispatch('jiaWait', this.n)
                
            },
        },
        mounted(){
            console.log('Count', this);
        }
    }
</script>

<style scoped>
    button {
        margin-left: 5px;
    }
</style>

store/index.js

//该文件用于创建vuex中最为核心的 store
import { setTimeout } from 'core-js';
import Vue from 'vue' 
//引入vuex
import Vuex from 'vuex'
//准备actions ---- 用于响应组件中的动作
const actions = {
    /* jia(context, value){
        console.log('actions中的jia被调用了');
        context.commit('JIA', value)
    },
    jian(context, value){
        console.log('actions中的jian被调用了');
        context.commit('JIAN', value)
    }, */
    jiaOdd(context, value){
        console.log('actions中的jiaOdd被调用了');
        if(context.state.sum % 2){
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value){
        console.log('actions中的jiaWait被调用了');
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },

}
// 准备mutations ---- 用于操作数据（state）
const mutations = {
    JIA(state, value){
        console.log('mutations中的JIA被调用了');
        state.sum += value
    },
    JIAN(state, value){
        console.log('mutations中的JIAN被调用了');
        state.sum -= value
    },
}
// 准备state ---- 用于存储数据
const state = {
    sum: 0, //当前的和
}

//应用vuex插件
Vue.use(Vuex)

//创建store并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

App.vue

<template>
  	<div>
		<Count></Count>
  	</div>
</template>

<script>
	import Count from './components/Count.vue'
	export default {
		name:'App',
  		components: { Count },
		  
	}
</script>

5.2 Vuex 工作原理图

在这里插入图片描述
说明：

  • state：
  1. vuex 管理的状态对象
  2. 它应该是唯一的
  3. 示例代码：
const state = {
	xxx: initValue
}
  • actions:
  1. 值为一个对象，包含多个响应用户动作的回调函数
  2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state
  3. 如何触发 actions 中的回调？
    在组件中使用: $store.dispatch('对应的 action 回调名') 触发
  4. 可以包含异步代码（定时器, ajax 等等）
  5. 示例代码：
const actions = {
	zzz ({commit, state}, data1) {
		commit('yyy', {data1})
}
  • mutations
  1. 值是一个对象，包含多个直接更新 state 的方法
  2. 谁能调用 mutations 中的方法？如何调用？
    在 action 中使用：commit('对应的 mutations 方法名') 触发
  3. mutations 中方法的特点：不能写异步代码、只能单纯的操作 state
  4. 示例代码：
const mutations = {
	yyy (state, {data1}){
		//更新state的某个属性
	}
}

注意：Actions、Mutations、State这三个都是对象；都要经过 store 的领导

5.3 搭建vuex环境

安装vuex：npm install vuex@3
注意：vue2使用vuex3版本；vue3使用vuex4版本。

  1. 创建文件：src/store/index.js
//该文件用于创建vuex中最为核心的 store
import Vue from 'vue' 
//引入vuex
import Vuex from 'vuex'
//准备actions ---- 用于响应组件中的动作
const actions = {}
// 准备mutations ---- 用于操作数据（state）
const mutations = {}
// 准备state ---- 用于存储数据
const state = {}

//应用vuex插件
Vue.use(Vuex)

//创建store并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})
  1. 在main.js中创建vm时传入store配置项
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store/index'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

5.4 基本使用

  1. 初始化数据、配置actions、配置mutations、操作文件store.js
//该文件用于创建vuex中最为核心的 store
import { setTimeout } from 'core-js';
import Vue from 'vue' 
//引入vuex
import Vuex from 'vuex'
//准备actions ---- 用于响应组件中的动作
const actions = {
    /* jia(context, value){
        console.log('actions中的jia被调用了');
        context.commit('JIA', value)
    },
    jian(context, value){
        console.log('actions中的jian被调用了');
        context.commit('JIAN', value)
    }, */
    jiaOdd(context, value){
        console.log('actions中的jiaOdd被调用了');
        if(context.state.sum % 2){
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value){
        console.log('actions中的jiaWait被调用了');
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },

}
// 准备mutations ---- 用于操作数据（state）
const mutations = {
    JIA(state, value){
        console.log('mutations中的JIA被调用了');
        state.sum += value
    },
    JIAN(state, value){
        console.log('mutations中的JIAN被调用了');
        state.sum -= value
    },
}
// 准备state ---- 用于存储数据
const state = {
    sum: 0, //当前的和
}

//应用vuex插件
Vue.use(Vuex)

//创建store并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})
  1. 组件中读取vuex中的数据：$store.state.sum
  2. 组件中修改vuex中的数据：$ store.dispatch('action中的方法名'，数据)或$store.commit('mutations中的方法名'，数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5.5 getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
  2. 在 store.js 中追加 getters 配置
......
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}
//创建并暴露store
export default new Vue.Store({
	......
	getters
})
  1. 组件中读取数据：$store.getters.bigSum

5.6 四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性
computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },
  1. mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },
  1. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }
  1. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含 $store.commit(xxx)的函数
methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（对象形式）
       ...mapMutations(['JIA','JIAN']),
   }

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

5.7 模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。
  2. 修改 store.js
 const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })
  1. 开启命名空间后，组件中读取state数据：
//方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),
  1. 开启命名空间后，组件中读取getters数据：
//方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])
  1. 开启命名空间后，组件中调用dispatch：
//方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  1. 开启命名空间后，组件中调用commit：
//方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

效果：
在这里插入图片描述

源代码如下：
Count.vue组件

<template>
    <div>
        <h1>当前求和为：{{ sum }}</h1>
        <h3>当前求和放大10倍为: {{ bigSum }}</h3>
        <h3>我在{{ school }}, 学习{{ subject }}</h3>
        <h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
    export default {
        name: 'Count',
        data(){
            return {
                n: 1, //用户选择的数据
            }
        },
        computed: {
            //借助mapState生成计算属性，从state中读取数据。（数组写法）
            ...mapState('countAbout', ['sum', 'school', 'subject']),
            ...mapState('personAbout', ['personList']),
            //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
            ...mapGetters('countAbout', ['bigSum'])
        },
        methods: {
            //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
            ...mapMutations('countAbout', {increment: 'JIA', decrement: 'JIAN'}),
            //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
            ...mapActions('countAbout', {incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'}),
        },
        mounted(){
            // console.log('Count', this.$store);
            const x = mapState({sum:'sum', school: 'school', subject: 'subject'})
            console.log(x);
        }
    }
</script>

<style scoped>
    button {
        margin-left: 5px;
    }
</style>

Person.vue组件

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: blue">Count组件求和为: {{ sum }}</h3>
    <h3>列表中第一个人的名字是：{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    // import {mapState} from 'vuex'
    export default {
        name: 'Person',
        data() {
            return {
                name: ''
            }
        },
        computed: {
            personList(){
                return this.$store.state.personAbout.personList
            },
            sum(){
                return this.$store.state.countAbout.sum
            },
            // ...mapState(['personList'])
            firstPersonName(){
                return this.$store.getters['personAbout/firstPersonName']
            }
        },
        methods: {
            add(){
                const personObj = {id: nanoid(), name: this.name}
                this.$store.commit('personAbout/ADD_PERSON', personObj)
                this.name = ''
            },
            addWang(){
                const personObj = {id: nanoid(), name: this.name}
                this.$store.dispatch('personAbout/addPersonWang', personObj)
                this.name = ''
            },
            addPersonServer(){
                this.$store.dispatch('personAbout/addPersonServer')
            }
        },
    }
</script>

store/index.js

//该文件用于创建vuex中最为核心的 store
import { setTimeout } from 'core-js';
import Vue from 'vue' 
//引入vuex
import Vuex from 'vuex'

//求和相关的配置
const countOptions = {
    namespaced: true,
    actions: {
        jiaOdd(context, value){
            console.log('actions中的jiaOdd被调用了');
            if(context.state.sum % 2){
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value){
            console.log('actions中的jiaWait被调用了');
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value){
            console.log('mutations中的JIA被调用了');
            state.sum += value
        },
        JIAN(state, value){
            console.log('mutations中的JIAN被调用了');
            state.sum -= value
        },
    },
    state: {
        sum: 0, //当前的和
        school: '西安文理',
        subject: '前端',
    },
    getters: {
        bigSum(state){
            return state.sum * 10
        }
    },
}

//人员相关的配置
import axios from 'axios'
const personOptions = {
    namespaced: true,
    actions: {
        addPersonWang(context, value){
            if(value.name.indexOf('王') === 0){
                context.commit('ADD_PERSON', value)
            }else{
                alert('添加的人必须姓王！')
            }
        },
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', {id:nanoid(), name:response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value){
            console.log('mutations中的ADD_PERSON被调用了');
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            {id: '001', name: '张三'}
        ]
    },
    getters: {
        firstPersonName(state){
            return state.personList[0].name
        }
    },
}
//应用vuex插件
Vue.use(Vuex)
//创建store并导出store
export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})

App.vue

<template>
  	<div>
		<Count></Count>
		<hr>
		<Person></Person>
  	</div>
</template>

<script>
	import Count from './components/Count.vue'
	import Person from './components/Person.vue'
	export default {
		name:'App',
  		components: { Count, Person },
	}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/445873.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI风范，院士点赞丨北京人工智能峰会暨AI金雁奖颁奖典礼成功举办，实在智能再获AI金雁奖

AI风范，院士点赞丨北京人工智能峰会暨AI金雁奖颁奖典礼成功举办，实在智能再获AI金雁奖

4月14日&#xff0c;由中国电子商会人工智能委员会主办&#xff0c;中国创业者俱乐部、北京集智未来人工智能产业创新基地联合主办的“2023北京人工智能峰会暨AI金雁奖颁奖典礼”举行&#xff0c;汇聚了人工智能各领域的产学研专家、院士、人工智能企业代表近300人&#xff0c;…
阅读更多...
Jenkins自动拉取SVN源代码构建打包vue前端项目

Jenkins自动拉取SVN源代码构建打包vue前端项目

目录 1.功能需求 2.安装插件 2.1 安装NodeJS插件 2.2 安装SVN插件 3.配置环境 3.1 NodeJS环境 4.新建任务配置部署信息 4.1 源代码管理 4.2 构建触发器 4.3 构建环境 4.4 构建步骤 5.构建项目 5.1 点击查看控制台日志 1.功能需求 使用Jenkins从SVN上拉取Vue项…
阅读更多...
C#基础学习--异步编程

C#基础学习--异步编程

什么是异步 启动程序时&#xff0c;系统会在内存中创建一个新的进程。进程是构成运行程序的资源的集合。进程是构成运行程序的资源的集合。这些资源包括虚地址空间&#xff0c;文件句柄和许多其他程序运行所需的东西 在进程内部&#xff0c;系统创建了一个称为线程的内核&…
阅读更多...
思科实验 EIGRP

思科实验 EIGRP

1.1.1 实验目的 通过对 CCNA 课程中的 EIGRP 实验部分进行回顾&#xff0c;从而更加准确掌握 EIGRP 路由协议的 配置方法&#xff0c;以及对 network 命令的正确理解。并且学会对 EIGRP 路由协议查看排错的相关命 令。 1.1.2 实验拓扑 拓扑说明&#xff1a;本实验由两台思科路…
阅读更多...
ai文案生成器免费-ai文案改写软件免费

ai文案生成器免费-ai文案改写软件免费

让你的文章更加精彩- AI文章润色 在今天的信息化时代&#xff0c;文章编辑变得越来越容易。但是&#xff0c;如何让自己的文章在海量信息中脱颖而出并吸引更多的阅读者却是一项挑战。 如果你是一位写作爱好者或你是一位工作中需要写作的从业者&#xff0c;你会发现你需要让你…
阅读更多...
蓝桥杯15单片机--串口通信模块

蓝桥杯15单片机--串口通信模块

目录 一、计算机常用通信方式 二、串口通信UART 三、串口通信寄存器 &#xff08;1&#xff09;串行口1控制寄存器SCON和PCON ​&#xff08;2&#xff09;串行口1数据缓冲器SBUF &#xff08;3&#xff09;串行口1辅助寄存器AUXR &#xff08;4&#xff09;串行口1中断…
阅读更多...
蛇优化算法

蛇优化算法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 蛇优化算法算法流程图初始化进化操作搜索阶段&#xff08;无食物&#xff09;——全局搜索搜索阶段&#xff08;有食物&#xff09;——局部搜索战斗模式交配模式 备…
阅读更多...
SAS学习第9章：卡方检验之适合性检验与独立性检验

SAS学习第9章：卡方检验之适合性检验与独立性检验

卡方检验就是统计样本的实际观测值与理论推断值之间的偏离程度&#xff0c;实际观测值与理论推断值之间的偏离程度就决定卡方值的大小&#xff0c;如果卡方值越大&#xff0c;二者偏差程度越大&#xff1b;反之&#xff0c;二者偏差越小&#xff1b;若两个值完全相等时&#xf…
阅读更多...
APP渗透—MobSF安全评估、frida、r0capture抓包

APP渗透—MobSF安全评估、frida、r0capture抓包

APP渗透—MobSF安全评估、frida、r0capture抓包 1. 前言2. 补充AppInfoScanner相关内容3. MobSF安全评估3.1. 下载MobSF3.2. 安装Docker3.2.1. 查看Linux内核版本3.2.2. 更新yum包3.2.3. 安装Docker软件包3.2.4. 设置yum源3.2.5. 查看Docker版本3.2.6. 安装Docker3.2.7. 设置Do…
阅读更多...
计算广告（十六）

计算广告（十六）

营销渠道效果评估与归因 分析背景 营销活动的投放目标通常是品牌知名度和直接效果的结合。除了品牌宣传&#xff0c;受众在品牌指定页面上的浏览、注册、咨询、收藏、成交等&#xff0c;都可作为营销活动的目标转化。衡量投放的渠道各自对目标转化的贡献如何&#xff0c;投入…
阅读更多...
成基于时间轮实现的定时器解决方案

成基于时间轮实现的定时器解决方案

文章目录 定时器的使用场景定时器与其他组件的关系定时器与网络事件在一个线程定时器与网络事件在不同线程当中处理大量定时任务怎么处理 定时器设计接口设计数据结构的抉择 时间轮时间轮的概念设计单层级时间轮1、时间轮大小2、时间精度 空推进问题多层时间轮 Skynet定时器实现…
阅读更多...
TS-黑马（一）

TS-黑马（一）

目录&#xff1a; &#xff08;1&#xff09;ts-入门 &#xff08;2&#xff09;ts-类型-标注位置 &#xff08;3&#xff09;ts-类型-复杂类型 &#xff08;4&#xff09;ts-类型-函数类型 &#xff08;1&#xff09;ts-入门 我们讲过javaScript语言是动态的语言&#xf…
阅读更多...
一次组件化与Android Jetpack的实践

一次组件化与Android Jetpack的实践

前言 至今为止从事Android开发两年多了&#xff0c;17年开始实习时&#xff0c;恰逢APP刚刚立项不久&#xff0c;当时新项目沿用了旧项目古老的MVC架构。从那之后一直都是根据飘忽不定的需求&#xff0c;没有规则的垒代码。 直到18年中&#xff0c;其他项目组开发的APP要求集…
阅读更多...
C语言入门篇——介绍篇

C语言入门篇——介绍篇

目录 1、什么是C语言 1、C语言的优点 3、语言标准 4、使用C语言的步骤 5、第一个C语言程序 6、关键字 1、什么是C语言 1972年&#xff0c;贝尔实验室的丹尼斯里奇和肯汤普逊在开发UNIX操作系统时设计了C语言&#xff0c;C语言是在B语言的基础上进行设计。C语言设计的初衷…
阅读更多...
算法记录 | Day38 动态规划

算法记录 | Day38 动态规划

对于动态规划问题&#xff0c;将拆解为如下五步曲 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 509.斐波那契数 思路&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#x…
阅读更多...
Linux应用编程（线程）

Linux应用编程（线程）

与进程类似&#xff0c;线程是允许应用程序并发执行多个任务的一种机制&#xff0c;线程参与系统调度&#xff0c;事实上&#xff0c;系统调度的最小单元是线程、而并非进程。 一、线程概述 什么是线程&#xff1f; 线程是参与系统调度的最小单位。它被包含在进程之中&#x…
阅读更多...
shell之自定义mykill(十六)

shell之自定义mykill(十六)

公众号&#xff1a;Android系统攻城狮 简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&am…
阅读更多...
2023-04-21：用go语言重写ffmpeg的metadata.c示例。

2023-04-21：用go语言重写ffmpeg的metadata.c示例。

2023-04-21&#xff1a;用go语言重写ffmpeg的metadata.c示例。 答案2023-04-21&#xff1a; 这段 Go 代码演示了如何使用 ffmpeg-go 库中的函数来读取多媒体文件元数据&#xff0c;包括视频、音频等信息。它的大体过程如下&#xff1a; 设置环境变量以加载 FFmpeg 动态链接库…
阅读更多...
紫砂壶型和泥料适配茶叶

紫砂壶型和泥料适配茶叶

一、壶型 1、紫砂壶泡茶&#xff0c;一般是壶音频率较高者&#xff0c;适宜配泡重香气的茶叶&#xff0c;如青茶;壶音稍低者较宜配泡重滋味的茶&#xff0c;如乌龙、铁观音。 壶音频率:是将壶盖取下&#xff0c;一手托住壶身一手用壶盖轻敲壶把产生的声音 2、容量在200ml以下…
阅读更多...
MVC、MVP、MVVM：谁才是Android开发的终极之选？

MVC、MVP、MVVM：谁才是Android开发的终极之选？

概述 MVC、MVP、MVVM 都是在 Android 开发中经常用到的架构思想&#xff0c;它们都是为了更好地分离代码、提高代码可复用性、方便维护等目的而设计的。下面对这三种架构思想进行简单的介绍和比较。 MVC MVC 架构是最早被使用的一种架构&#xff0c;它把程序分成了三个部分&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023