VUE：Vuex--状态管理模式(store/state/Getter/Action/Mutation/Module)

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>