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存取值和映射函数使用说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持悠悠之家。
发表评论 取消回复