Vuex

Vuex是vuejs的状态管理模式。
什么情况使用vuex：某个状态需要在多个组件之间共享，例如用户登录状态，用户信息等。

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({   //**store是响应式的**
  state: { 
    //状态相关信息
    //属性会被加载到响应式系统中，当属性值被修改时，会通知其他引用该属性的地方做同步修改
    counter:10,
    student:[{name:'L',age:18},{name:'M',age:28},{name:'H',age:38}],
    info:{name:'LiLei',age:18}
  },
  modules:{}, //模块
  mutations:{
    //同步方法  **用于修改状态**
    increment(state){
      state.counter++;
    }
     incrementNum(state，num){
      state.counter += num;
    }
    incrementNum2(state，payload){
      state.counter += payload.num;  /**/payload在这里是一个对象**
    }
    updateInfo(state){ 
       // state.info['address'] = '北京', //address不是响应式的
       Vue.set(state.info,'address','北京')  //address是响应式的,会被添加到响应式系统中
       // delete state.info['address'] = '北京', //address不是响应式的
        Vue.delete(state.info,'address','北京')  //address是响应式的,会被添加到响应式系统中
       }
   },
   action:{
     //异步方法
     aUpdateInfo(context,payload){
       setTimeout( () = >{
         context.commit( ' updateInfo')
         console.log(payload);
       }  , 1000)
     }
   },
   getters:{
     mul(state){ 
       return state.counter * state.counter
     },
     more20(state){ 
       return state.student.filter(s=> s.age>20);
     },
     more20Length(state,getters){ 
       return getters.more20.length;
     },
     moreAge(state){ 
       return function(age){
        return state.student.filter(s=> s.age>age);
       };
    //   return  (age) = >{ return   state.student.filter(s=> s.age>age) };
     }
   },
});

{{ $store.getters.more20Length }}
{{ $store.getters.moreAge(20) }}
export default{
   name:'App',
   computed:{
           count:function(){
              return this.$store.state.count   //访问状态
           }
           let mulNum =  this.$store.getters.mul
       },
     methods:{
       add(){
         this.$store.commit('increment')  //修改状态，mutation是官方更新store的唯一方式
       }
       addNum(num){ /、参数也可以传对象
         //mutation提交风格1
         this.$store.commit('incrementNum',num)  
       }
       addNum2(num){ 
        //mutation提交风格2
         this.$store.commit({ type: 'incrementNum2',num})  
       }
        updateInfo(num){ 
        // this.$store.commit('updateinfo')  
        //异步提交
         this.$store.dispatch({'aUpdateInfo','我是payload'})  
       }
       
     }
}

import Vue from 'vue';
import App from '_/App.vue';
import router from './router';
import store from './store';

export default new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

over

Mutation常量类型

1. 创建文件夹mutation-type.js

export const UPDATE_INFO = 'UPDATE_INFO '

2. 创建store对象

import Vue from 'vue';
import Vuex from 'vuex';
import * as types from './mutation-type.';
Vue.use(Vuex);
export default new Vuex.Store({   
  state: { 
    info:{name:'LiLei',age:18}
  },
  mutations:{  
    [types.UPDATE_INFO ](state，payload){
      state.info = {...state.info , age:payload.age};  
    }
   },
});
export default store

3. 使用

import { UPDATE_INFO } from "./store/mutation-type";  //**export default导出的才能自定义 名字，否则只能按固定名字导出**
updateInfo(){
  this.store.commit(UPDATE_INFO ,{age:44})
}

Modules
Vuex使用单一状态数，以为着很多状态都会交给Vuex来管理，Vuex允许将store划分成很多模块(Module)

const moduleA ={
    state:{ name:'',...},
    mutations:{...},
    actions:{...},
  }
  const moduleB ={
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
  }
const store = new Vuex.Store({
  modules:{
    a:moduleA,
    b:moduleB
  }
})

store.state.a.name //->moduleA的状态
store.state.b //->moduleB的状态
mutation使用方法不变。注意方法不要重名
getters:{
getFullname(state,getters,rootState) //rootState可以拿到根store
}
actions:{
aUpdateName(context){
this.store.commit(‘updateName’) //这里只commit自己所在的模块，例如moduleA
}
}

对象的解构
const obj = { name:’ lily’ , age :18 ,height: 1.58 ,address : ‘beijing’ }

const { name,age,height} = obj
因此 {state ，getters, rootState} = context