目录
3.mutations：可以简单的理解为存值（注意：mutation 都是同步事务）
自我认知：
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.userInfo2):借助辅助函数：第四段代码
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 --save2.引入在mani.js引入即可；
import store from "./store";
至此为止就介绍结束了。文中不当的地方还请同学们多多指点。