VueX

• 什么是vuex？

  • vuex是一个专门为 Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• vueX适用场景

  • vuex适用于大中型复杂项目的应用开发，因为vuex并不能让跨组件 变得更加简单和方便，反而会让他变得复杂，所以官网都有提到说，如果不打算开发大型单页应用，使用vuex可能是繁琐冗余的。

    • 由此可知，什么情况下，Vuex才是必须的？
    • 需要对共享数据和行为进行拆分；
    • 复杂的异步逻辑，需要综合多个模块进行状态演进，有详细的调试信息；
    • 需要用到第三方插件；
    • 由于由全局唯一数据源，方便进行跨平台，SSR中类似NUXT采用Vuex进行前后端数据同步。
    • 需要综合考虑多个组件生命周期，先后顺序，实现特定逻辑。
    • 参考：www.zhihu.com/question/36…

• vueX的核心点：

  -   state：vuex的基本数据，用来存储变量  
  
  <!---->
  
  -   getters：从基本数据（state）派生的数据，相当于state的计算属性，对state里面的状态进行过
  -   滤处理，用法与组件自身的计算属性一模一样  
  
  <!---->
  
  -   mutations  
  
  <!---->
  
  -   Action  
  
  <!---->
  -   modules  
  

• vueX的使用

  • 第一步：安装

    • npm方法：npm install vuex@next --save

      • 持久化(一般都会用到）:npm install --save vuex-persistedstate
    • yarn方法：yarn add vuex@next --save
    • 持久化(一般都会用到）:yarn add vuex-persistedstate

  ○ 第二步 在main.js中应用

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  // import axios from 'axios'
  import Vant from 'vant';
  import 'vant/lib/index.css';
  
  Vue.use(Vant);
  // 图片懒加载
  import { Lazyload } from 'vant';
  
  Vue.use(Lazyload);
  
  // 引入cookie
  import Cookie from 'js-cookie'
  Vue.prototype.$Cookie = Cookie
  
  // 注册时可以配置额外的选项
  Vue.use(Lazyload, {
      loading:'/images/加载中.gif',
      error:'/images/加载失败.webp'
  });
  // 引入
  import * as echarts from 'echarts';
  // 挂载到vue实例下边
  Vue.prototype.$echarts = echarts
  
  Vue.config.productionTip = false
  Vue.use(ElementUI);
  // Vue.prototype.$http = axios
  
  new Vue({
      router,
      store,
      render: h => h(App)
  }).$mount('#app')
  

  ○ 第三步 在我们store目录下的index.js文件中

  import Vue from 'vue'
  import Vuex from 'vuex'
  import reg from './modules/reg'// 这里是我们的拆分，从store目录下的其他文件夹新建js引入
  import createPersistedState from 'vuex-persistedstate'  // vuex持久化存储
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
      state: {}, // 基本数据，用来存储变量
      getters: {},// 相当于计算属性
      mutations: {}, // 提交同步方法
      actions: {}, // 提交异步方法
      modules: { //模块化
          reg
      },
      // 持久化存储
      plugins: [createPersistedState({
          key: 'myStore', // 存储在localStorage的key名，默认为vuex
          storage: window.localStorage  // 存储的位置
      })]
  })
  
  
  
  **** 提示：在被拆分的模块中，命名空间一定要开启    示例如下：*******
  export default {
  state: { //定义数据
      userInfo: {}
  },
  getters: {},
  mutations: { //定义方法
      getUserInfo(state, value) {
          state.userInfo = value;
      }
  },
  actions: { //异步触发mutations里的方法
      getUserInfoAsync(context, value) {
          context.commit('getUserInfo', value) //异步触发
      }
  },
  modules: {},
  namespaced: true, // 命名空间   设为true
  

○ 最后，想要在页面上使用的话

// 一般用到的有mapActions    mapGetters   mapState

import {mapActions} from 'vuex' // 先引入方法（这个是往vuex存储数据）
<script>
    import {mapActions} from 'vuex'
    import {Dlogin} from '@/api'
    export default {
        data() {
            return {
                // 定义变量
        }
    },
    methods:{
                    //模块名   方法名 
        ...mapActions('user',['getUserInfoAsync']), // 先把方法拿出来
       
        // 比如说这是一个点击提交的按钮  (点击事件)
        onSubmit(){
            //调用方法  提交数据
           this.getUserInfoAsync(值)
        },
    },
    // 判断是否解禁 
    computed:{
        isClass(){
            if(this.ValidatorUsername(this.username) && this.ValidatorPass(this.password)){
                return false
            }else{
                return true
            }
        }
    }
 };
 </script>

那这次大概就先了解到这，以后再行补充~~~~