新玩家Vue笔记19

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件通信方式，使用于任意组件之间。

搭建vuex环境

安装vuex库：npm i vuex@3

创建文件：src/store/index.js

// 该文件用于创建Vuex中最核心的store
import Vue from 'vue'
import Vuex from 'vuex'

// 使用vuex插件
// 在index.js中使用，主要是为了避免在main.js中使用该插件出现
// 必须先使用在引入的问题
Vue.use(Vuex)

// 准备action--用于响应组件中的动作
const actions = {}

// 准备mutations--用于操作数据(state)
const mutations = {}

// 准备state--用于存储数据
const state = {}


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

 在main.js中创建vm时传入store配置项

// 引入vue
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false


const vm = new Vue({
    el: '#app',
    render: h => h(App),
    store
})

初始化数据state，配置actions、mutations，操作文件store.js 

 组件中读取vuex中的数据：$store.state.sum

组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

<template>
    <div>
        <h1>当前求和为{{$store.state.sum}}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</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: {
            increment() {
                this.$store.commit('ADD', this.n)
            },
            decrement() {
                this.$store.commit('MINUS', this.n)
            },
            incrementOdd() {
                this.$store.dispatch('addOdd', this.n)
            },
            incrementWait() {
                this.$store.dispatch('addWaite', this.n)
            }
        }
    }
</script>

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

// 该文件用于创建Vuex中最核心的store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 准备action--用于响应组件中的动作
const actions = {
    add(context, value) {
        context.commit('ADD', value)  
    },
    minus(context, value) {
        context.commit('MINUS', value)
    },
    addOdd(context, value) {
        if(context.state.sum % 2 == 0) {
            context.commit('ADD', value)  
        }
    },
    addWaite(context, value) {
        setTimeout(() => {
            context.commit('ADD', value) 
        }, 500);
    }
}

// 准备mutations--用于操作数据(state)
const mutations = {
    ADD(state, value) {
        state.sum += value
    },
    MINUS(state, value) {
        state.sum -= value
    }
}

// 准备state--用于存储数据
const state = {
    sum: 0,
}


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

四种map方法

1. mapState方法：用于帮助我们映射state中的数据 
2. mapGetters方法：用于帮助我们映射getters中的数据
3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
4.  4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

 

<template>
    <div>
        <h1>当前求和为{{sum}}</h1>
        <h3>放大10倍为{{bigSum}}</h3>
        <h3>我在{{school}}学习{{subject}}</h3>
        <h3>下方总人数为{{personList.length}}</h3>
        <select v-model.number="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,mapActions,mapMutations} from 'vuex'
    export default {
        name: 'Count',
        data() {
            return {
                n: 1,
            }
        },
        computed: {
            // 使用对象展开运算符将此对象混入到外部对象中
            // 对象写法
            // ...mapState({sum:'sum',school:'school',subject:'subject'}),

            // 数组写法
            ...mapState(['sum','school','subject','personList']),

            // ...mapGetters({bigSum:'bigSum'}),
            ...mapGetters(['bigSum']),
        }, 
        methods: {
            ...mapMutations({increment:'ADD',decrement:'MINUS'}),
            ...mapActions({incrementOdd:'addOdd',incrementWait:'addWaite'})
            /* increment() {
                this.$store.commit('ADD', this.n)
            },
            decrement() {
                this.$store.commit('MINUS', this.n)
            }, */

            /* incrementOdd() {
                this.$store.dispatch('addOdd', this.n)
            },
            incrementWait() {
                this.$store.dispatch('addWaite', this.n)
            } */
        }
    }
</script>

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

---