探索vue2框架的世界：简述vue中公用状态管理仓库vuex的属性以及使用方法_vue2利用辅助函数调用仓库的action方法传值-优快云博客

今天重新温习了vue全家桶中公用状态管理仓库vuex的属性以及使用方法，和大家分享一下学习笔记，欢迎各位大神和同行们指点和修正🤞🤞🤞

vuex概述

window.[数据]可以实现全组件通信，但是不安全，vuex设置一个安全的，全组件都可以使用的数据
vuex是只设计数据和状态，并不和页面打交道
vuex是专门帮助所有组件维护共享数据的公共区域
vuex是全组件公用的状态管理仓库，存放所有组件公用的数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WjSpbE4r-1683705560813)(https://note.youdao.com/yws/res/21860/WEBRESOURCEf925aa635971c0564aa4ae7f9013e127)]

vuex的创建

vuex提供了辅助函数，快速生成计算属性的映射方法
创建脚手架时，选择vuex选项，一起安装，结果会在脚手架项目src文件夹下
store不能独立应用，必须被main.js中引入newVue中

import store from './store'
...
new Vue({
    router,
    store,
    render:h=>h(App)
}).$mount('#app')

vuex的属性值

五个主要的属性值 state mutations actions modules getters

store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
cosnt store=new Vuex.store({
     state:{
        // 相当于商店货架上的商品，谁来商店都可以访问，但是不能修改
     },
     mutations:{
        // 相当于理货员，可以调整货架上的商品，可以修改state中的变量
     },
     actions: {
        // 写一些异步的操作
        // setUserAysnc (context, LoginUser) {
        //   context.commit('setUser', LoginUser)
        
        // 相当于进货的角色，向服务器发送请求
        
     },
     modules: {
       user
       // 加载外部引入的模块 
       // 拆出来的模块和主模块拥有同样的属性
       // 在组件里的调用拆出来模块的方法，方法名前面要加上模块名，例如 this.$store.commit('user/login')
     },
     getters:{
         // 派生状态，类比计算属性
     }
     
  },
    
})

export default store

1.state:{}

++state中的变量和props中的变量是单向响应式，data中的变量是双向响应式。++
只要状态值发生改变，页面所有依赖这个状态值的地方都会自动发生改变。但是，vuex中的变量只能读取不能直接修改。
存储在此属性中的值，可以全局每个组件中使用

组件中使用state里状态值的方式1：辅助函数的方式

经过mapState方法,会把仓库里的数据(状态)打包成一个数组,参数是一组名字,返回值是把名字与值建立映射关系的自定义下标数组.只要把这个返回值打散,就可以拿到参数名字里的数据.

在页面组件export default之前先引入Vuex提供的专门获取vuex中State中所有变量的函数mapState

import {mapState} from 'vuex'

在页面组件export default{}中computed中调用mapState函数，指定要解构出来的state的变量名，当做当前组件的计算属性

//Vuex中的变量只能读取不能直接修改，所以要放在computed中当作计算属性使用

computed:{  //在computed属性中注册
       ...mapState(["uname"]) //执行mapState方法=>把数据存在一个数组里
 },

在视图层直接使用状态值

  <h3>{{uname}}</h3>

组件中使用state里状态值的方式2：通过$store直接调用

store绑定在了vue对象中，所以可以通过$store调用state里的值

this.$store.state.uname

视图层直接使用

<p>{{$store.state.uname}}</p>

或

if(this.$store.state.uname=="德玛"){
    console.log('德玛西亚')
}

2.mutations:{}

mutations里放入的是专门修改state状态值的方法

mutations:{
    方法名(state,payload 载荷){state.age=payload}
    // mutations方法中的第一个是默认参数state，可以获取state中的公共状态值
    // 第二个参数是组件传入的参数
    
}

在Vuex中Mutations中定义专门修改State中变量的修改函数

state:{
    uid:1,
    uname:"dignding"
}
mutations:{
    setUid(state,uid){
        state.uid=uid
    }
    setUname(state,uname){
        state.uname=uname
    }
}

组件中调用mutations里方法的方式1：辅助函数的写法

在组件export default之前引入vuex自带的mapMutations方法

import {mapMutations} from 'vuex'

在组件中methods方法中注册

...mapMutations(["setUname"]),//把方法存在一个数组里,打散数组,得到方法

注册后，组件将得到mutations里的方法当自己的方法来用

this.setUname(this.uname);

组件中调用mutations里方法的方式2：通过$store直接调用

this.$store.commit('方法名',’参数’) 
//例：this.$store.commit('setUname',this.uname)
//commit 方法用来触发mutations中的方法
//参数1，触发方法的方法名
//参数2   是传给触发方法的参数
//如果触发的方法 需要传递多个参数
//则需要把参数2设置成数组或者对象

3.actions:{}

用于存储异步方法，网络请求等相关操作
actions属性里的方法
第一个参数：当前这个仓库的对象，用这个参数触发仓库所有的方法以及所有的状态值
第三个参数：传递的值
Vuex中的网络请求，把获取到的数据传入state，便于在多个界面中共享使用
- 在Vuex中，顶部提前引入axios，import axios from ‘axios’
- 在Vuex中，Actions内添加vlogin函数
- vlogin函数发送axios请求，并接受返回值
- 如果返回登录成功的结果，则调用当前vuex大环境中的setUid()和setUname()两个函数。将服务器返回的uid和uname两个值设置到state的uid和uname两个属性上。

// store/index.js
import axios from 'axios'

const store= new vuex.Store({
    state:{
        uid:1,
        uname:"dignding"
    },
    mutations:{
        setUid(state,uid){
            state.uid=uid
        }
        setUname(state,uname){
            state.uname=uname
        }
    },  
    actions:{
        vlogin(content,form){
            axios.post(
               "/users/signin",
               `uname=${form.uname}&upwd=${form.upwd}`
            ).then(result=>{
                if(result.data.code==1){
                    context.commit('setUid',result.data.uid)
                    context.commit('setUname',result.data.uid)
                }else{
                    throw Error(result.data.msg)
                }
            })
        }
    }
})
export default store

组件中调用actions里方法的方式1：辅助函数

组件中引入vuex提供的专门提取actions中方法的mapActions函数

import {mapActions} from 'vuex'

组件中methods里，调用mapActions函数，解构出发送ajax请求的函数vlogin
在methods的方法中调用vlogin方法，如果登录成功…，（例如，把success改为true，让登录框切换显示登录成功。）

methods:{
    ...mapActions(['vlogin']),
    login(){
        this.vlogin(this.form).then(result=>{
            this.success=true
        })
    }
}

组件中调用axtions里方法的方式2：通过$store直接调用

this.$store.dispatch("vlogin",'tang') 可以触发到vuex上action里的方法
//参数1 actions里的方法名
//参数2 传递给该方法名方法的参数

4.getters:{}

派生状态，类比计算属性
在组件中以状态值的形式使用
在vuex的getters中定义的是方法，方法中的默认参数是state，利用state中已有的值，计算得到新的值，计算后的状态值就是它的返回值。

//  store/index.js
getters:{
    age_ab(state){
        return state.age*2 
    }
}

组件中使用getters计算属性的方式1：辅助函数

import {mapGetters} from vuex  //在组件中引入
computed:{
    ...mapGetters(["age_db"])  // 在计算属性注册
}

<div>{{age_db}}</div> // 在视图层使用

组件中使用getters计算属性的方式2：通过$store直接调用

this.$store.getters.age_ab  //在逻辑层使用

<div>{{$store.getters.age_ab}}</div>  //在视图层使用

5.modules:{}

在store文件夹中新建拆出来的模块user.js

export default{   //export const xxx={ }
    namespaced:true, 
    //命名控件 true=>形成以一个模块(与主仓库中以及其他模块中的数据/方法不产生影响)
    state: {},
    multations:{},
    actions:{}
}

在store/inde.js主模块中引入并注册

import user from '../store/user.js'//使用模块先引入
modules: {
    user  //加载外部引入的模块
  }

调用user.js里的公共数据

方式1: 普通方法
this.$store.commit('user/login',this.uname); 

方式2: 辅助函数方法
import {mapState,mapMutations} from'vuex'
...mapMutations('user',['login','logout']),
this.login(this.uname)