207 Example Adding More State

给程序添加一个登录页面控制Vuex页面是否显示

步骤

1、main.js的state中添加一个变量isLoggedIn用于控制是否已经登录的状态；mutations中添加一个改变变量值得方法setAuth()；actions中添加login和logout，调用setAuth控制变量；getters中添加userIsAuthenticated用于外部获取是否登录的状态；

import { createApp } from 'vue';
import { createStore } from 'vuex';

import App from './App.vue';

const store = createStore({
  state() {
    return {
      counter: 0,
      isLoggedIn: false,
    };
  },
  mutations: {
    increment(state) {
      state.counter += 2;
    },
    incrementBy(state, payload) {
      state.counter += payload.value;
    },
    setAuth(state, payload) {
      state.isLoggedIn = payload.isAuth;
    }
  },
  actions: {
    increment(context) {
      //setTimeout(() => {
      context.commit('increment');
      //}, 2000);
    },
    incrementBy(context, payload) {
      console.log('-----------------------');
      console.log(context);
      console.log('-----------------------');
      context.commit('incrementBy', payload);
    },
    login(context) {
      context.commit('setAuth', { isAuth: true });
    },
    logout(context) {
      context.commit('setAuth', { isAuth: false });
    }
  },
  getters: {
    finalCounter(state) {
      return state.counter * 3;
    },
    //normalizedCounter(_, getters) { //if state is not needed, it can be replaced with _ to use second argument for getters
    normalizedCounter(state, getters) {
      const finalCounter = getters.finalCounter;
      if (finalCounter < 0) {
        return 0;
      }
      if (finalCounter > 100) {
        return 100;
      }
      return finalCounter;
    },
    userIsAuthenticated(state) {
      return state.isLoggedIn;
    },
  }
});

const app = createApp(App);

app.use(store);

app.mount('#app');

2、新建组件UserAuth.vue

<template>
    <button @click="login" v-if="!isAuth">Login</button>
    <button @click="logout" v-if="isAuth">Logout</button>
</template>

<script>
export default {
    methods: {
        login() {
            // login logic here
            this.$store.dispatch('login');
        },
        logout() {
            // logout logic here
            this.$store.dispatch('logout');
        }
    },
    computed: {
        isAuth() {
            return this.$store.getters.userIsAuthenticated;
        }
    },
}
</script>

3、App.vue中使用

<template>
  <base-container title="Vuex" v-if="isAuth">
    <!-- <h3>{{counter}}</h3> -->
    <the-counter></the-counter>
    <favorite-value></favorite-value>
    <button @click="addOne">Add 10</button>
    <change-counter></change-counter>
  </base-container>
  <base-container title="Auth">
    <user-auth></user-auth>
  </base-container>

</template>

<script>
import BaseContainer from './components/BaseContainer.vue';
import TheCounter from './components/TheCounter.vue';
import ChangeCounter from './components/ChangeCounter.vue';
import FavoriteValue from './components/FavoriteValue.vue';
import UserAuth from './components/UserAuth.vue';

export default {
  components: {
    BaseContainer,
    TheCounter,
    ChangeCounter,
    FavoriteValue,
    UserAuth
  },
  computed: {
    counter() {
      return this.$store.getters.finalCounter;
    },
    isAuth() {
      return this.$store.getters.userIsAuthenticated;
    }
  },
  methods: {
    addOne() {
      //this.$store.commit('increment');
      //this.$store.commit('incrementBy', 10);
      // this.$store.commit({
      //   type: 'incrementBy',
      //   value: 10
      // })
      //this.$store.dispatch('increment');
      this.$store.dispatch({
        type: 'incrementBy',
        value: 10
      })
    },

  }
};
</script>

<style>
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}
</style>