vuex存取值和映射函数使用说明

2023-07-19 22:38:08 68

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

前言

vuex的执行流程

组件通过dispatch调用action，action通过commit来触发mutation，mutation来负责修改state，state修改后去重新渲染受影响的dom。

安装和引入

1、安装

npminstallvuex-S

2、引入

新建：store/index.js。

importvuefrom'vue';
importVuexfrom'vuex';

vue.use(Vuex);

exportdefaultnewVuex.Store({
strict:true,//严格模式，防止直接修改state（性能很差，发布时改为false）
state:{
a:1,
b:2
},
mutations:{
addA(state,val){
state.a+=val;
},
addB(state,val){
state.b+=val;
}
},
actions:{
addA({commit},val){
//调用mutations中的addA()
commit('addA',val);
},
addB({commit},val){
//调用mutations中的addB()
commit('addB',val);
}
},
//相当于computed
getters:{
getA(state){
returnstate.a;
},
getB(state){
returnstate.b;
},
count(state){
returnstate.a+state.b;
}
},
modules:{

}
});

3、挂载

importstorefrom'./store';

newVue({
el:'#app',
store,
components:{App},
template:''
})

使用

映射关系

mapState>computed

mapGetters>computed

mapMutations>methods

mapActions>methods

State和mapState

state是vuex的核心，是统一存放数据的地方。

从store中获取值。（不推荐）

官方推荐通过computed来获取，但是如果需要获取多个值就会很麻烦。

mapState

getters和mapGetters

获取getters中的值。


a:{{$store.getters.getA}}


b:{{$store.getters.getB}}


a+b={{$store.getters.count}}

使用mapGetters映射。

mutations和mapMutations

通过$store.commit来触发mutation。

不推荐直接调用mutation来修改。

使用mapMutations映射。

actions和mapActions

官方推荐通过action去触发mutation，虽然比较麻烦。

action支持异步，mutation只能同步。

通过$store.dispatch来触发action。

a+5

使用mapActions映射。

Modules

当系统比较庞大时，store会变得非常臃肿。

为了方便store的模块化管理，Vuex允许我们将store分割成modules。

每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块。

补充知识：向vuex存储数据和获取数据-和直接调用actions.js中的异步方法

向vuex的变量存储数据

1.在state.js中添加userInfo:{},

2.actions.js中添加同步用户信息-将参数userInfo传递给USER_INFO

创建一个方法-不用异步方法

syncUserInfo({commit},userInfo){
commit(USER_INFO,{userInfo});
},

3.创建一个中间变量mutation-types.js

exportconstUSER_INFO='user_info';

4.在actions.js中引入变量-USER_INFO

import{
USER_INFO
}from'./mutation-types'

5.在mutations.js中引入变量

import{
USER_INFO
}from'./mutation-types'

将userInfo赋值给state

[USER_INFO](state,{userInfo}){
state.userInfo=userInfo;
},

6.外界直接调用actions.js中的方法syncUserInfo

import{mapActions}from'vuex'
methods:{
//存到vuex-是个方法。需要...延展符展开
...mapActions(['syncUserInfo']),
}

向vuex中获取数据

1.引入import{mapState}from'vuex';

2.计算属性

computed:{
...mapState(['userInfo'])
},

直接调用vuex-中actions.js的异步方法--

this.$store.dispatch

created(){
//调用vuex-actions中的方法-刚进入app，就需要验证登录的时效性
this.$store.dispatch('getUserInfo')
},

actions.js

//7.异步获取用户信息
asyncgetUserInfo({commit}){
constresult=awaitgetUserInfo();//actions中调用getUserInfo方法---需要引入import
console.log(result);
if(result.success_code===200){
commit(USER_INFO,{userInfo:result.message});
}
},

actions中调用getUserInfo方法---需要引入

import{
getUserInfo,
}from'../api'
----------------------
api-index.js
//2.9获取登录的用户信息
exportconstgetUserInfo=()=>ajax(BASE_URL+'/api/user_info');

以上这篇vuex存取值和映射函数使用说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

vuex存取值和映射函数使用说明

热门推荐

随机推荐