vuex：

概念：vuex是一个组件之间的公共数据库，一般用于组件的数据调用、账号权限、登录退出

1、npm i vuex 安装vuex
2、使用vuex，在src目录下声明一个store.js的文件，在文件中声明vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3、实例化对象
对外暴漏一个const store实例一个对象

const store = new Vuex.Store({
    state: {
    //存储数据（对象形式）
    },
    getters: {
    //计算属性
    },     
    mutations: {
    // 用来修改state和getters里面的数据（动作）
    },
    actions: {
    //vuex中的异步请求
    }
})

export default store;

举例：

const store = new Vuex.Store({
    state: {
    num:1
    },
    getters: {
    //计算属性
    },     
    mutations: {
       addnum(state,usernum){
         state.num=usernum
       }
      
    },
    actions: {
    //vuex中的异步请求
    }
})

export default store;

4、使用
在main.js里面引用vuex。 在该页面调用 this.$store.state.num

举例(根据上面vuex为基础)：

//可以使用vuex中的mutations属性，来进行对vuex内数据修改
heml部分：
<button @click='addnum'>修改数据++<button>
js部分：
methods:{
 addnum(){
 this.$store.commit("addnum",++this.$store.state.num)
 }
}
vuex中的数据进行修改

进阶

actions存储用户登录后的信息：
用户信息一般未obj格式，所以需要在登录完成后，调用vuex内方法，进行存储
例：

const store = new Vuex.Store({
    state: {
    userinfo:{},
    },
    getters: {
    //计算属性
    },     
    mutations: {
       
       //存在异步问题
       setinfo(state,login){
       //login为保存的信息，当login为对象形式时，可直接“=”
          state.userinfo=login
       }
      
    },
    // actions 里面不能直接修改数据  解决异步
    //context是一个对象，具有 store 相同的方法/属性
    actions: {
       getinfo(context,login){
        //模拟异步请求
        setTimeout(()=>{
        context.commit("setinfo",login)
        },1000)
        
       }
    }
})

export default store;



//组件中的操作
   methods:{
    log(){
    this.$store.dispatch('getinfo',{
         phone:1,
         key:123456
      })
     }
    }

gettersstore的计算属性，getter的返回值根据他的依赖存起来，只有当他依赖发生变化才会被重新计算。
接受state作为第一个参数，store.getters对象，可以通过属性访问值

const store = new Vuex.Store({
    state: {
    name:'张三'
    },
    getters: {
     gettername(state){
       console.log("getters里面方法执行")
       return state.name+'·尼古拉'
       }
    },     
    mutations: {
    // 用来修改state和getters里面的数据（动作）
    },
    actions: {
    //vuex中的异步请求
    }
})

export default store;

//组件中使用
{{this.$store.getters.gettername}}

辅助函数 mapGetters

//组件中
import { mapGetters } from 'vuex'
computed:{
   ...mapGetters{['gettername']}    //将gerrers数据映射过来
   
}

//使用：{{gettername}}

辅助函数 mapState

//组件中
import { mapState } from 'vuex'
computed:{
   ...mapState{['name']}    //将State数据映射过来
   
}

//使用：{{name}}

辅助函数 mapMutations

const store = new Vuex.Store({
    state: {
    num:10
    },
    getters: {
     gettername(state){
       console.log("getters里面方法执行")
       return state.name+'·尼古拉'
       }
    },     
    mutations: {
       numdd(state,payload){
         state.num=state.num + payload.num
       }
    },
    actions: {
    //vuex中的异步请求
    }
})

export default store;
//------------------------------------------


import { mapMutations } from 'vuex'
//方法里面
methods:{
  ...mapMutations(['numdd'])
}

//htem
<button @click="numdd(num:3)">
加3  通过mapMutations
</button>

辅助函数 mapActions

const store = new Vuex.Store({
    state: {
    userinfo:{},
    },
    getters: {
    //计算属性
    },     
    mutations: {
       //存在异步问题
       setinfo(state,login){
       //login为保存的信息，当login为对象形式时，可直接“=”
          state.userinfo=login
       }
      
    },
    actions: {
       getinfo(context,login){
        //模拟异步请求
        setTimeout(()=>{
        context.commit("setinfo",login)
        },1000)
        
       }
    }
})

export default store;
//-------------------------------
import { mapActions } from 'vuex'
//方法里面
methods:{
  ...mapMutations(['getinfo'])
}
//html

<button @click="getinfo({phone:phone})">
</button>