vuex 学习之路

目录

自我认知：

官方介绍：

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";

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