vuex 从入门到精通，超详细❤❤❤

vuex 从入门到精通

vuex 状态管理工具，实现数据之间相互传递，不受父子组件传递的局限性。vue3.0状态管理工具，推荐使用 新一代状态管理工具pinia

vuex的核心模块 ：state,mutation,getter,action,moudle

1.vue工作流程，用户将数据存储到state里面，
2.修改数据需要用户在 组件 里面通过$store.dispath触发到actions实现修改数据的流程
3.然后在actions里面调用commit触发到mutations，最终在mutations触发state数据修改

注意：修改数据只能在mutations里面修改

state ，用来存储数据，类似组件里面的data

//组件
computed:{
    getNumber(){
		return this.$store.state.num
    },
    // 辅助函数,对象形式和数组形式
     ...mapState(['num']),
     ...mapState({num:state=>state.num}),
}

// HTML
<div>{{num}}</div> //使用辅助函数
<div>{{getNumber}}</div> // 使用传统方式

// store->index.js
state:{
    num:100
}

mutation ，必须是同步函数，也就是不能在mutation发送请求

//组件
methods:{
    // 1.普通方式
    sava(){
        this.$store.commit('SAVA_USER',{USERnAME:'ZS',age:20})
    },
        // 2.辅助函数方式
        ...mapMutations('user',['SAVA_USER']) //数组方式，参数1 user代表模块（没有模块化省略次参数），参数2 SAVA_USER表示传递到mutations的函数，传递的参数html调用传递就好
    	...mapMutations('user',{USER:'SAVEUSER'}) // 对象方式，参数1模块化，参数二对象的key为组件调用，value为传递到mutations里面的函数
    	...mapMutations('user',{USER:})
}

//HTML
<div @click="SAVA_USER({age:19})">提交</div>  //数组形式的传递
<div @click="USER(123)">提交</div> //对象方式传参

// store-> index.js
mutations:{
    SAVA_USER(state,val){ // state 是state对象的数据，val是组件中SAVA_USER传递的数据{age:19}
        state.userInfo = val
    },
    SAVEUSER(state,val){ // 参数val是获取到组件中USER传递的参数123
        state.user = val
    }
    
},
state:{
        userInfo:{},
        user:{}
    }

action ，可以是异步函数，可以发送请求

// 组件
create(){
    // 辅助函数 将 `this.SAVA_USER()` 映射为 `this.$store.dispatch('SAVA_USER')`
    this.SAVA_USER()
    // 将 `this.SAVA_USER(123)` 映射为 `this.$store.dispatch('SAVA_USER',123)`
    this.SAVE_USER(123)
},
methods:{
    save(){
        this.$store.dispath('SAVE_USER',{a:'11'})
    },
        // 辅助函数
        ...mapActions(['SAVE_USER'])
    	...mapActions({sava_user:'SAVE_USER'})
    	
}

//企业开发实例
当用户登录之后，进入到首页的时候，可以在methods使用 ...mapAction('user',['SAVE_USER'])，并在生命周期函数 create中，通过调用辅助函数 this.SAVA_USER(),此函数就可以映射为this.$store.dispath('SAVE_USER')，从而在vuex里action里面异步请求用户信息

// store-> index.js
import Vue from 'vue'
let vm = new Vue()
state:{
    userInfo:{}
},
mutation:{
    SAVE_USER(state,val){
        state.userInfo = val
    }
},
action:{
    SAVE_USER({commit,state}){ // Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,咱们利用ES6 解构，{commit,state,getters} = context
        //或者咱们使用 SAVA_USER(context){}
        //SAVA_USER函数体内:context.commit('abc')
        let url = 'http://XXXXXXXXXXXX'
        let data = {XX:XX}
        return new Promise((resolve,reject)=>{
            vm.$axios.post(url,data).then(res=>{
            if(res.flag){
                commit('SAVE_USER',res)
                resolve(res)
            }
        })
       }) 
    }
}

getter ，类似组件里面的计算属性，对state数据重新提取

// store->index.js
getters:{
    getUser(state){
        return state.userInfo.userName
    },
    getUserAge(state){
        return state.userInfo.userAge
    }
}
// 组件 HTML
<div>{{$store.gettres.getUser}}----{{$store.getters.getUserAge}}</div> //常规方式
<div>{{getUser}}---{{getUserAge}}</div> // 辅助函数方式
// 组件 script
computed:{
   ...mapGetters(['getUser','getUserAge']) 
}

moudles，模块化

import { createStore } from 'vuex'
import user from './user'
import address from './address'
import goods from './goods'

export default createStore({
  modules: {
    address,
    user,
    goods
  }
})

const address = {
    namespaced: true,
    state: {
        
    },
    getters: {
        },
    },
    mutations: {
        
    },
    actions: {

    }
}

export default address

const goods = {
    namespaced: true,
    state: {
        
    },
    getters: {
    },
    mutations: {
    },
    actions: {},
    modules: {}
}

export default goods

const user = {
    namespaced: true,
    state: {
        userInfo: sessionStorage.getItem('userInfo')
    },
    getters: {},
    mutations: {
        setUserInfo(state, val) {
            state.userInfo = val;
        }
    },
    actions: {},
    modules: {}
}

export default user