Vuex简单使用到模块化

---

Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（这是官方的介绍，简单来说就是保存管理数据）。

使用场景：多组件对同一数据状态进行修改，任意组件之间通信

state：状态，用于存储对象数据。
actions：行为，用于保存方法的行为，在此实现后台接口请求等异步任务。
mutations：转变，用于提交行为的结果，直接对state中的数据进行操作，不可以包含异步操作。
getters：类似于在store中的计算属性，对state中的数据进行包装。
modules：模块，将store分割成不同的模块，每个模块有自己的state、actions、mutations，getters

Vuex安装

• 由于现在默认安装的是与Vue3.0相对应的版本Vuex4，如果想安装Vue2.x对应的版本：npm i vuex@3

Vuex配置使用

• 创建一个store,我们之后再项目中看到store文件就相当于看到Vuex。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const state ={
    count: 9,
    salary: 20
}
const getters = {
    bigCount(state){
        return state.count * 10
    }
}
const mutations = {
    addCount(state){
        state.count++
    },
    reduceCount(state){
        state.count--
    },
    resetCount(state,count){
        state.count = count
    },
    addSalary(state){
        state.salary++
    },
    reduceSalary(state){
        state.salary--
    },
}
const actions = {
    addCount({ commit }){
        commit('addCount')
    },
    reduceCount({ commit }){
        commit('reduceCount')
    },
    resetCount({ commit },count){
        commit('resetCount',count)
    },
    addSalary({ commit }){
        commit('addSalary')
    },
    reduceSalary({ commit }){
        commit('reduceSalary')
    },
}
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

//main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    store,
}).$mount('#app')

之后我们便可以再vc上看到$store

		<h3>Vuex中的数值count为：{{$store.state.count}}</h3>
        <h3>Vuex中的数值bigCount为：{{$store.getters.bigCount}}</h3>
        <h3>Vuex中的数值salary为：{{$store.state.salary}}</h3>

<template>
    <div class="LeftBottom">
        <h4>LeftBottom组件</h4>
        <button @click="addSalary">salary+1</button>
        <button @click="reduceSalary">salary-1</button>
    </div>
</template>

<script>

export default {
    name: "LeftBottom",
    methods:{
        addSalary(){
            this.$store.commit('addSalary')
        },
        reduceSalary(){
            this.$store.commit('reduceSalary')
        },
    }
};
</script>

mapState和mapGetters

<template>
    <div class="RightComp">
        <h4>RightComp组件</h4>
        <hr>
        <h3>Vuex中的数值count为：{{count}}</h3>
        <h3>Vuex中的数值bigCount为：{{bigCount}}</h3>
        <h3>Vuex中的数值salary为：{{salary}}</h3>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "RightComp",
    computed: {
        ...mapState(['count','salary']),
        ...mapGetters(['bigCount'])
    },
};
</script>

mapActions和mapMutations

如果有参数，参数应该写到方法使用的地方

<template>
    <div class="LeftTop">
        <h4>LeftTop组件</h4>
        <button @click="addCount">count+1</button>
        <button @click="reduceCount">count-1</button>
        <button @click="resetCount(0)">初始化count</button>
    </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex';
export default {
    name: "LeftTop",
    methods:{
        // addCount(){
        //     this.$store.commit('addCount')
        // },
        // reduceCount(){
        //     this.$store.dispatch('reduceCount')
        // },
        // resetCount() {
        //     this.$store.dispatch('resetCount',0)
        // },
        ...mapMutations(['addCount']),
        ...mapActions(['reduceCount','resetCount'])
    }
};
</script>

<style>
.LeftTop {
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: skyblue;
}
</style>

Vuex模块化

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach((key) => {
    modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
Object.keys(modules).forEach((key) => {
    modules[key]['namespaced'] = true
})
export default new Vuex.Store({
    modules,
})

• 使用mapState等方法

<template>
    <div class="LeftTop">
        <h4>LeftTop组件</h4>
        <button @click="addCount">count+1</button>
        <button @click="reduceCount">count-1</button>
        <button @click="resetCount(0)">初始化count</button>
    </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex';
export default {
    name: "LeftTop",
    methods:{ 
        ...mapMutations('count',['addCount']),
        ...mapActions('count',['reduceCount','resetCount'])
    }
};
</script>

<template>
    <div class="RightComp">
        <h4>RightComp组件</h4>
        <hr>
        <h3>Vuex中的数值count为：{{count}}</h3>
        <h3>Vuex中的数值bigCount为：{{bigCount}}</h3>
        <h3>Vuex中的数值salary为：{{salary}}</h3>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "RightComp",
    computed: {
        ...mapState('count',['count']),
        ...mapState('salary',['salary']),
        ...mapGetters('count',['bigCount'])
    },
    mounted(){
        console.log(this.$store);
    }
};
</script>

• 不使用mapState等方法

<template>
    <div class="LeftBottom">
        <h4>LeftBottom组件</h4>
        <button @click="addSalary">salary+1</button>
        <button @click="reduceSalary">salary-1</button>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
    name: "LeftBottom",
    methods:{
        addSalary(){
            this.$store.commit('salary/addSalary')
        },
        reduceSalary(){
            this.$store.commit('salary/reduceSalary')
        },
        // ...mapMutations('salary',['addSalary','reduceSalary'])
    }
};

输出this.$store.