vuex存取值和映射函数使用说明
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
前言
vuex的执行流程
组件通过dispatch调用action，action通过commit来触发mutation，mutation来负责修改state，state修改后去重新渲染受影响的dom。
安装和引入
1、安装
npm install vuex -S
2、引入
新建：store/index.js。
import vue from 'vue';
import Vuex from 'vuex';
vue.use(Vuex);
export default new Vuex.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){
return state.a;
},
getB(state){
return state.b;
},
count(state){
return state.a + state.b;
}
},
modules:{
}
});
3、挂载
import store from './store';
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
使用
映射关系
mapState > computed
mapGetters > computed
mapMutations > methods
mapActions > methods
State和mapState
state是vuex的核心，是统一存放数据的地方。
从store中获取值。（不推荐）
<template>
<div>
a:{{$store.state.a}}
<br>
b:{{$store.state.b}}
</div>
</template>
官方推荐通过computed来获取，但是如果需要获取多个值就会很麻烦。
mapState
<template>
<div>
a:{{a}}
<br>
b:{{b}}
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
name: "MapState",
computed:{
//将store.state中的属性映射到computed
...mapState(['a','b'])
}
}
</script>
getters和mapGetters
获取getters中的值。
<div>
a:{{$store.getters.getA}}
<br>
b:{{$store.getters.getB}}
<br>
a+b={{$store.getters.count}}
</div>
使用mapGetters映射。
<template>
<div>
a={{getA}}
<br>
b={{getB}}
<br>
a+b={{count}}
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: "MapGetters",
computed:{
//将store.getters映射到computed
...mapGetters(['getA','getB','count'])
}
}
</script>
mutations和mapMutations
通过$store.commit来触发mutation。
不推荐直接调用mutation来修改。
<template>
<div>
a={{$store.state.a}}
<br>
b={{$store.state.b}}
<br>
a+b={{$store.getters.count}}
<hr>
<button @click="$store.commit('add',5)">a+5</button>
</div>
</template>
使用mapMutations映射。
<template>
<div>
a={{$store.state.a}}
<br>
b={{$store.state.b}}
<br>
a+b={{$store.getters.count}}
<hr>
<button @click="addA(5)">a+5</button>
</div>
</template>
<script>
import {mapMutations} from 'vuex';
export default {
name: "MapMutations",
methods:{
//将store.mutations映射到methods
...mapMutations(['addA'])
}
}
</script>
actions和mapActions
官方推荐通过action去触发mutation，虽然比较麻烦。
action支持异步，mutation只能同步。
通过$store.dispatch来触发action。
<button @click="$store.dispatch('addA',5)">a+5</button>
使用mapActions映射。
<template>
<div>
a={{$store.state.a}}
<br>
b={{$store.state.b}}
<br>
a+b={{$store.getters.count}}
<hr>
<button @click="$store.dispatch('addA',5)">a+5</button>
</div>
</template>
<script>
import {mapActions} from 'vuex';
export default {
name: "MapActions",
methods:{
//将store.actions映射到methods
...mapMutations(['addA'])
}
}
</script>
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
export const USER_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. 异步获取用户信息
async getUserInfo({commit}){
const result = await getUserInfo(); // 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 获取登录的用户信息
export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');
以上这篇vuex存取值和映射函数使用说明就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。