vuex 学习之路

之路"/>

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={};

$storemit('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.$storemit('userInfo')`// `mapMutations` 也支持载荷：'userInfo' // 将 `this.userInfo(userInfo)` 映射为 `this.$storemit('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";

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