vuex配置

目录

1. vuex的五个核心
2. 配置vuex
3. vuex持久化

一、vuex五个核心概念

1. State 定义状态（变量）
2. Getter 获取状态
3. Mutation 修改状态
4. Action commit mutation,触发Mutation函数
5. Module 当状态很多的时候,分模块管理状态

二、配置vuex

import Vue from 'vue';
import Vuex from 'vuex';
import order from './module/order'
import VuexPersistedstate from 'vuex-persistedstate';
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        isLogin: false,
        username: 'web03'
    },
    getters: {
        // isLogin: (state)=> {
        //     return state.isLogin;
        // }
        isLogin: state=> state.isLogin,
        username: state=> state.username,
    },
    mutations: {
        updateLogin(state,payload) {
            state.isLogin = payload;
        },
        updateUsername(state,payload) {
            state.username = payload;
        }
    },
    actions: {
        // LoginAction(context,payload) {
        //     context.commit('updateLogin',payload);
        // }
        // 
        LoginAction({commit},payload) {
            commit('updateLogin',payload);
        }
    },
    modules: {
        order
    },
    plugins: [
        // 持久化
        VuexPersistedstate()
    ]
})

(三) 获取state的值

1. 通过mapGetters

   <script>
   import {mapGetters} from 'vuex';
   export default {
       computed: {
           ...mapGetters(['isLogin'])
       }
   }
   </script>
   

2. 通过$store.state获取

   <script>
   import {mapGetters} from 'vuex';
   export default {
       computed: {
          isLogin() {
              return this.$store.state.isLogin;
          }
       }
   }
   </script>
   

(四) 修改state的值

<template>
    <div>
        <button @click="login">立即登录</button>
    </div>
</template>

<script>
export default {
    methods: {
        login() {
         // 通过action修改
            // this.$store.dispatch('LoginAction',true);
            // 通过mutation修改
            this.$store.commit('updateLogin',true);
        }
    }
}
</script>