vuex存取值和映射函数使用说明
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中获取值。(不推荐)
a:{{$store.state.a}}
b:{{$store.state.b}}
官方推荐通过computed来获取,但是如果需要获取多个值就会很麻烦。
mapState
a:{{a}}
b:{{b}}
getters和mapGetters
获取getters中的值。
a:{{$store.getters.getA}}
b:{{$store.getters.getB}}
a+b={{$store.getters.count}}
使用mapGetters映射。
a={{getA}}
b={{getB}}
a+b={{count}}
mutations和mapMutations
通过$store.commit来触发mutation。
不推荐直接调用mutation来修改。
a={{$store.state.a}}
b={{$store.state.b}}
a+b={{$store.getters.count}}
使用mapMutations映射。
a={{$store.state.a}}
b={{$store.state.b}}
a+b={{$store.getters.count}}
actions和mapActions
官方推荐通过action去触发mutation,虽然比较麻烦。
action支持异步,mutation只能同步。
通过$store.dispatch来触发action。
使用mapActions映射。
a={{$store.state.a}}
b={{$store.state.b}}
a+b={{$store.getters.count}}
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存取值和映射函数使用说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。