作用：集中存储和管理应用的所有组件状态。通俗的说，就是集中存储、计算、处理数据
一个项目只有一个数据源，所用的组件共用一个仓库（Store）
使用场景：组件间存在公用依赖的数据
在Store仓库里，有以下几种属性：
state是用来存放数据,远程加载数据，加载的是一个静态的数据;
getters是初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据)
//定义getters 不推荐使用箭头函数
const getters = {
count:function(state){
return state.count +=100
}
};
//使用mapGetters <script> //引入 import {mapState,mapMutations,mapGetters} from ‘vuex‘ computed:{ ...mapState([ " count" ]), ...mapGetters([ "count" ]) }, </script>
mutation：里面装着一些改变数据方法的集合,把处理数据逻辑方法全部放在mutations里面
注：Vuex中store数据改变的唯一方法就是mutation
mutation结构：{type:handler()}, 事件类型(type)和回调函数(handler)
调用type的时候需要用到store.commit方法。
载荷（payload）:简单的理解就是往handler(state)中传参
//定义mutation
import Vuex from ‘vuex‘
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state, n) { // type:increment，handler第一个参数是state；
state.count += n
}
}
})
//使用mutation
store.commit(‘increment‘) //调用type，触发handler（state）
或者
import { mapMutations } from ‘vuex‘
export default {
methods: {
...mapMutations([
‘increment‘ // 映射 this.increment() 为 this.$store.commit(‘increment‘)
]),
Action 提交的是 mutation，而不是直接变更状态. Action 是异步的，mutation是同步的。
vuex学习---简介的案例：这里是加10 减1
在store.js 中 代码为：
import Vue from ‘vue‘
import Vuex from ‘vuex‘
//使用vuex模块
Vue.use(Vuex);
//声明静态常量为4
const state = {
count : 4
};
const mutations = {
add(state,n){
state.count +=n.a;
},
sub(state){
state.count--;
}
};
const actions = {
//2种书写方式
addplus(context){ //可以理解为代表了整个的context
context.commit(‘add‘,{a:10})
},
subplus({commit}){
commit(‘sub‘);
}
};
//导出一个模块
export default new Vuex.Store({
state,
mutations,
actions
})
2.在App.vue中 代码如下：
<template> <div id="app"> <div id="appaaa"> <h1>这是vuex的示例</h1> <p>组件内部count{{count}}</p> <p> <button @click = "addplus">+</button> <button @click = "subplus">-</button> </p> </p> </div> </div> </template> <script> //引入mapGetters import {mapState,mapMutations,mapGetters,mapActions} from ‘vuex‘ export default { name:‘app‘, data(){ return { } }, computed:{ ...mapState([ "count" ]), }, methods:{ ...mapActions([ "addplus", "subplus" ]) } } </script> <style> </style>
mapXXXX
核心：map其实就是一个在store文件中的映射而已，就是不用让你要调用一个值需要敲这么多代码
如果有以下的定义方式：
methods: {
...mapActions([
‘foo‘,
‘bar‘
])
}
则相当于
methods: {
foo(...args) {
return this.$store.dispatch.apply(this.$store, [‘foo‘].concat(args))
}
bar(...args) {
return this.$store.dispatch.apply(this.$store, [‘bar‘].concat(args))
}
}
官网的vuex的例子中，有这种写法：
