作用：集中存储和管理应用的所有组件状态。通俗的说，就是集中存储、计算、处理数据

一个项目只有一个数据源，所用的组件共用一个仓库（Store）

使用场景：组件间存在公用依赖的数据

在Store仓库里，有以下几种属性：

state是用来存放数据,远程加载数据，加载的是一个静态的数据;

getters是初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据)

//定义getters 不推荐使用箭头函数const getters = {   count:function(state){       return state.count +=100   }};

//使用mapGetters

 

 

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); //声明静态常量为4const 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中 代码如下：

 

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的例子中，有这种写法：

methods: {  ...mapActions([    'some/nested/module/foo',    'some/nested/module/bar'  ])}

则相当与

methods: {  foo(val){    return this.$store.dispatch('some/nested/module/foo', val))  }   //bar 省略....  })}

 

vuex实例:  

 

vue在同一个组件内；

methods中的一个方法调用methods中的另外一个方法

可以在调用的时候  this.$options.methods.xxx()

 

在App.vue组件中使用mapMutations传参，修改state数据（状态）

要点： 要写在methods下面，

因为mapActions/mapMutations只是把action/mutation函数绑定到你的methods里了;你调methods里的方法的时候照常传参就可以了。

 

 

npm rm vuex --save

然后安装最新的vuex

npm install vuex --save

 

 

try{
     const res = await getAdminInfo(username) if (res.code == '1') { console.log(res.data); commit('saveAdminInfo', res.data); }else{ throw new Error(res) } }catch(err){ console.log('您尚未登陆或者session失效') }