vuex 学习之路

发布于:2022-11-09 ⋅ 阅读:(5) ⋅ 点赞:(0) ⋅ 评论:(0)

 

目录

自我认知:

官方介绍:

1.state 中定义了userInfo对象;

2.getters:

3.mutations:可以简单的理解为存值(注意:mutation 都是同步事务)

4.actions:异步事务

5.modules:

6.vuex安装引入:


 自我认知:

vuex经常在项目中看到,实际应用起来也只是会用,今天抽时间认真学习了一下。

一般小型项目只用store模式就够了。简单全局传参使用;平时只是肤浅的知道是一种状态管理,却不知其真正的用处。

官方介绍:

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

Vuex核心概念:state、getters、mutations、actions、modules。

下面结合实例说明核心概念:

先看一段store文件定义的相关代码:第一段代码

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app' //分模块modules 
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    userInfo:{}
  },
  mutations: { 
    //不同的使用场景
    changeUserInfo(state,data){
      Vue.set(state,'userInfo',data)
    },
    userInfo: (state, age) => {
      state.userInfo.age= age
    }
   
  },
  actions: { 
    // 获取用户信息
    GetInfo({
      commit,
      state
    }) {
      return new Promise((resolve, reject) => {
        getInfo({
          token: "xxx"
        })
          .then(res => {
            commit("changeUserInfo", res); 
            resolve(res);
          })
          .catch(error => {
            reject(error);
          });
      });
    },
  
  },
  modules: {
    app 
  },
  getters
})

export default store

如上代码所示:

1.state 中定义了userInfo对象;

1.1使用方式:

1)全局任意使用写法:this.$store.state.userInfo;

2)借助辅助函数:(一般使用...mapState的多) -- 第二段代码

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
  computed: {
    //直接使用辅助函数写法
    //mapState([
     // 映射 this.userInfo为 store.state.userInfo
     //'userInfo'
    //])
    //对象展开运算符写法
    ...mapState({
      userInfo: (state) => state.user.userInfo
    }),
  
  },
  created() {
    console.log(this.userInfo,"打印试试");
  },
}

2.getters:

按照之前学习java的经验可以理解为获取值,在getters中可以二次计算或者修改state中定义的值,可以理解为state的计算属性。

在上面第一段代码中单独定义了一个getter.js 第三段代码

const getters = {
  userInfo: state => state.app.userInfo

}
export default getters

使用方法:

1)也是可以直接调用的:

this.$store.getters.userInfo

2):借助辅助函数:第四段代码

import { mapGetters} from 'vuex'
export default {
  computed: { 
    //对象展开运算符写法
    ...mapGetters({
      userInfo: (state) => state.user.userInfo
    }),
  
  },
  created() {
    console.log(this.userInfo,"打印试试2");
  },
}

3.mutations:可以简单的理解为存值(注意:mutation 都是同步事务

例如:参照第一段代码中的案例

存值及提交值的方式:

let user={};

$store.commit('changeUser',user);

3.1在mutations中:state是mutations接收的第一个参数,data是commit提交过来的最终参数值。

changeUserInfo(state,data){
      Vue.set(state,'userInfo',data)
},

3.2提交方式2:也是借助辅助函数

import { mapMutations } from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations([
      'userInfo', // 将 `this.userInfo()` 映射为 `this.$store.commit('userInfo')`

      // `mapMutations` 也支持载荷:
      'userInfo' // 将 `this.userInfo(userInfo)` 映射为 
      `this.$store.commit('userInfo', userInfo)`
    ]),
    
  }
}

4.actions:异步事务

官网解释:

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

很明显action可以通过函数来改写state的值并提交mutation;

参考第一段代码案例:

actions中通过接口getInfo获取到的用户信息提交到mutations中;

4.1actions的分发调用:

this.$store.dispatch("GetInfo");来调用getInfo方法;

5.modules:

使用场景:当项目中操作多个不同对象时,可以使用modules将store模块分割;

第一段代码中的app就是一个分割案例;

app.js中有自己的state以及motations等;

5.1使用方法:app.js内容



const demoform = {
  state: {
    shopNum: 0
  },

  mutations: { 
    SHOP_NUM: (state, shopNum) => {
      state.shopNum = shopNum;
    }
  },

  actions: {
    
  }
};

export default demoform ;

引入:见第一段代码;

6.vuex安装引入:

1.安装:按照官方提示安装即可:

npm install vuex@next --save

2.引入在mani.js引入即可;

import store from "./store";

至此为止就介绍结束了。文中不当的地方还请同学们多多指点。