vuex基本用法

1.安装

#vue3使用
npm install vuex@next --save
#vue2使用
npm install vuex@3 --save

2.使用

• index.js

//在store(仓库)下的index.js这份文件，就是用来状态管理
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import mutations_type from './mutations_type'
import actions from './actions'
import modules from './modules'
Vue.use(Vuex);

const store = new Vuex.Store({
    // state相对于组件中的data,专门用来存放全局的数据
    state,
    // getters相当于组件中的computed,使用getters调用
    getters,
    // mutations相当于组件中methods,用于修改store中的状态,但不能使用异步方法(定时器，axios),使用commit调用
    mutations,
    // 将所有mutations中的方法归纳起来(官方推荐)
    mutations_type,
    // actions专门用来处理异步，实际修改状态依然是mutations，使用dispatch调用
    actions,
    //主模块
    //Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
    modules,
});
export default store;


//文件夹中单独创建文件或直接写到index.js
// 1.state.js
export default {
    num:0,
}

// 2.getters.js
export default {
    getNum(state){
        return state.num;
    }
}

// 3.mutations.js
export default {
    //payload是一个形参,如果组件在commit时,有传参数过来就存在,否则就是undefined
    increase(state,payload){
        state.num += payload ? payload : 1;
    },
    //让num减1
    decrease(state){
        state.num--;
    }
}

// 4.actions.js
export default {
    //点击了"减1"按钮后，放慢一秒再执行减法
    decreaseAsync(context){
        context.commit('decrease');
    }
}

// 5.modules.js
import  users from './users/index'
export default {
    users
}

// 6.mutations_type.js
export const MUTATIONS_TYPE = {
    INCREASE: 'increase',
    DECEREASE: 'decrease',
}
export default {
    //payload是一个形参,如果组件在commit时,有传参数过来就存在,否则就是undefined
    [MUTATIONS_TYPE.INCREASE](state,payload){
        state.num += payload ? payload : 1;
    },
    //让num减1
    [MUTATIONS_TYPE.DECEREASE](state){
        state.num--;
    }
}


// users子模块
// 在store中创建users文件夹
// 1.users/index.js
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default {
    namespaced:true,//命名空间
    state,
    getters,
    mutations,
    actions,
}
// 2.users/state.js
export default {
    nickName: "小李",
    token: 'sadadasflkjfhdjhjcnxz434nwoonw'
}

• Home.vue

<template>
    <div class="home">
        <div><Son1></Son1></div>
        <div><Son2></Son2></div>
        <div><Btn></Btn></div>
    </div>
</template>
<script>
    import Son1 from "./Son1";
    import Son2 from "./Son2";
    import Btn from "./btn";
    export default {
        name: "Home",
        components: {Btn, Son2, Son1}
    }
</script>

• Bin.vue

<template>
    <div>
        <!--直接调用-->
        <button @click="$store.commit('increase')">点击+1</button>
        <button @click="$store.commit('increase',2)">点击+2</button>
        <button @click="$store.dispatch('decreaseAsync')">点击-1</button>
        <!--辅助函数-->
        <button @click="increase()">(第二种)点击+1</button>
        <button @click="increase(2)">(第二种)点击+2</button>
        <button @click="decreaseAsync()">(第二种)点击-1</button>
    </div>
</template>
<script>
    //mapMutations,mapActions写在methods中
    import {mapMutations,mapActions} from 'vuex'
    export default {
        name: "btn",
        methods:{
            ...mapMutations(['increase']),
            ...mapActions(['decreaseAsync'])
        }
    }
</script>

• Son1.vue

<template>
    <div class="son1">
        <h2>Son1页面的数字：{{$store.getters.getNum}}</h2>
        <!--使用辅助函数-->
        <h2>(第二种)Son1页面的数字：{{num}}</h2>
        <!--使用子模块的值-->
        <h2>{{$store.state.users.nickName}}</h2>
        <button @click="changeNikeName()">小李变小贾</button>
    </div>
</template>
<script>
    //mapState，mapGetters写在computed中
    import {mapState,mapMutations} from 'vuex'
    export default {
        name: "Son1",
        computed:{
            ...mapState(['num']),
        },
        //使用子模块的值
        methods:{
            ...mapMutations({
                'changeNikeName':'users/changeNikeName'
            }),
        }
    }
</script>

• Son2.vue

<template>
    <div class="son2">
        <h2>Son2页面的数字：{{$store.getters.getNum}}</h2>
        <!--使用辅助函数-->
        <h2>(第二种)Son2页面的数字：{{getNum}}</h2>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex'
    export default {
        name: "Son2",
        computed:{
            ...mapGetters(['getNum'])
        }
    }
</script>