Vuex原理图/环境配置手敲/求和案例(详解入门)

2022-05-20 18:25:27 3.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

解决微信浏览器弹出 Download: Null 问题的终极指南（附阿里云 OSS 配置详解）微信内置浏览器点击下载链接时弹出 "Download: Null" 的问题，是开发者常遇到的痛点。本篇文章全面解析其原因，包括 iOS 文件下载限制、Content-Disposition 响应头的重要性，以及阿里云 OSS 默认配置的影响。通过详细教程，教你如何在阿里云 OSS 中设置 Content-Disposition 元数据（attachment;filename=xxx.pdf），有效解决该问题。同时，拓展介绍微信浏览器的文件下载限制、跨平台兼容性优化以及 CDN 配置注意事项。阅读详情

1.Vuex环境搭建

三个步骤:

1.npm i vuex
//注意:(vue3只能安装npm i vuex@4)

//注意:(vue3只能安装npm i vuex@3)

//2.store文件夹使用Vue.use(Vuex)
//(1)src文件夹下创建 store文件夹

//(2)引入文件Vue 和 Vuex因为Vue.要使用Vuex

improt Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

//(3)准备好actions/mutations/state三个对象

const actions = {}

const mutations = {}

const state = {}

//(4)然后创建并暴露store

export default new Vuex.Store({

actions ,

mutations,

state,

})

3.在main.js中用全局使用store

//引入store

import Store from './store'

//new Vue实例中添加一个Store配置项

new Vue({

el:'#app',

render:h => h(App),

Store,

beforeCreate(){

Vue.prototype.$bue = this

}

})

4.components创建组件Count.vue

<template>
    <div>
    	<h2>当前求和为:4</h2>
        <select v-model.number='n'>
            //也可以通过v-bind:value控制字符串'1'改动时变成string数字
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
        </select>
        <button @click='add'>+</button>
        <button @click='addDe'>-</button>
        <button @click='addOdd'>当前求和为奇数在加</button>
        <button @click='addWaite'>等一等在加</button>
    </div>
</template>
<script>
    export default {
        name:'Count',
        data() {
            return {
                n:1,
            }
        },
        methods:{
            add() {
                this.$store.commit('JIA',this.n)
            },
            addDe() {
                this.$store.commit('JIAN',this.n)
            },
            addOdd() {
                this.$store.dispatch('addOdd'.this.n)
            },
            addWaite() {
                this.$store.dispatch('addWaite'.this.n)
         },
    }
}
   </script>

5..在store文件夹中创建index.js中的准备好actions/mutations/state三个对象写上对应的响应/操作/存储更改内容

//准备actions服务员接受客人提的要求dispatch(要求)
const actions = {

	addOdd(context,value) {

	if(context.state.sum){context.$commit('JIA',value)}},

	addWaite(context,value) {
    setTimeout(() =>{context.$commit('JIA',value)},500)
}},
// 准备mutations厨师操作数据按照条件变更   
const mutations = {

JIA(state,value) {state.sum += value},

JIAN(state,value) {state.sum -= value}

}

//准备state存储数据

const state = {

	sum:0,

}