为什么存：存仓库的多组件可以数据共享

核心api

• this.$store

  • 每个组件都可以获取$store

• this.$store.commit("同步方法名", 参数)

  • 调用同步方法，修改store中的数据

• this.$store.dispatch("异步方法名", 参数)

  • 调用异步方法，执行异步代码

1.   下载vuex，main.js中应用配置好的store

2.   实例化仓库：store存储文件夹下 index.js中实例化仓库

共6个核心概念

3. 插件安装

可持久化存储，插件：安装：

npm install vuex-persistedstate --save

日志打印：vuex自带createLogger

这个插件不用装，查看是否存储成功，会自动打印到 控制台

import { createStore,createLogger } from 'vuex'
import createPersistedState from "vuex-persistedstate";

//实例化仓库
export default createStore({
    state:{ //负责存储数据
       userinfo:{}
    },
    getters:{ //定义计算方法( 类似组件中的计算属性, 每个计算方法必须有返回值 )
        
    },
    mutations:{ //定义同步方法( 可以直接修改state中的数据 )
        save_userinfo( state, payload ){
            state.userinfo = payload;
        }
    },
    actions:{ //定义异步方法( 内部可以执行异步代码, 但是不能直接修改state中的数据 )

    },
    modules:{ //模块化管理state中的数据

    },
    plugins:[ //配合其他插件管理state中的数据
        createLogger(),//日志打印
        createPersistedState(),//持久化存储
    ]
})

4.使用

methods:{
    onClickLeft(){
      this.$router.go(-1);
    },
    async onSubmit(values){
      //发起 登陆请求
      var res = await service.user_login( values );
      if( res.data.code == 200 ){
        //存储用户的信息,token
        this.$store.commit('save_userinfo',res.data.data)

        //跳转到首页
        this.$router.push('/index');
      }
    }
  }

5. methods：使用同步方法

6. actions：定义异步方法：（内部可以执行异步代码，但是不能直接修改state中的数据）

异步方法的背后都有一个同步方法

7. getters：定义计算方法，（类似数组中的计算属性，每个计算方法必须有返回值）

其实是当属性用，很像computed,当属性用

vuex升级模块化：简写：有map辅助函数

modules：模块化管理state中的数据：使用后的区别

• import导入数据模块（模块会独享方法），modules中注册模块

  • 另一种写法

• 导出实例化对象

• 标签中使用

• 同步异步使用

辅助函数可以实现简写

可以将vuex中的数据和方法直接映射

mapState 映射到computed中 mapGetters 映射到computed中

mapMutations 映射到methods中 mapActions 映射到methods中

• 辅助函数两种写法：看需求

  • 简写

• 计算方法都是直接用：放在计算属性中