Vuex 是什麼？

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。Vuex 和單純的全域性物件有以下兩點不同：

Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。

你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。

Vuex的核心

1. state： Vue 元件中展示狀態

2. Getter：Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。

3. Action：在元件中使用 this.$store.dispatch(‘xxx’) 分發 action

4. Mutation：更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。

5. Module：由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割

程式碼演示：

1. state.js

      isLoading: false,
    
   

2. mutation.js

      SET_LOGIN (state, platform) {
        state.isLogin = platform;
      },
   

3. Action.js

      setLogin ({commit}, platform) {
        commit('SET_LOGIN', platform);
      },
   

4. Gettter.js

      getLogin: (state) => state.isLogin,
   

5. xx.vue

    <script>
    import Backbar from './small_components/Back_bar';
    import { mapGetters } from 'vuex';
    import {getUserInfo} from 'src/service/getData'
    
    
    export default {
      name: 'login',
      data () {
        return {
          uname: '',
          pwd: '',
          loginData:{}
        };
      },
      mounted () {
        if (this.getLogin) {
          this.$router.replace('/myzone');
        }
      },
      computed: {
        ...mapGetters([
          'getLogin',
          'getuname',
          'getpwd',
          'getAdminPhone'
        ])
      },
      methods: {
        async cheack_n_p () {
          if (this.uname === '' || this.pwd === '') {
            alert('使用者名稱或密碼不能為空');
            return;
          }
          var adminPhone = this.getAdminPhone;
          alert(adminPhone)
    
          this.loginData = await getUserInfo(this.uname,this.pwd);
          console.log(this.loginData.res);
          if(this.loginData.res!==0){
            this.$store.dispatch('setLogin', true);
            this.$store.dispatch('setAccount',this.loginData.obj.id );
            this.$store.dispatch('setPwd',this.loginData.obj.userType );
            this.$store.dispatch('setLogin', true);
    //        this.$router.go(-1);
            this.$router.replace('/');
    
          }else{
            alert('使用者名稱或密碼錯誤');
          }
        }
      },
      components: {
        'Backbar': Backbar
      }
    };
    </script>