vuex
vuex顾名思义是一款为vue而生的状态管理工具。 vue本身自带着store模式,其实就是全局注册一个对象,实现数据共享。==适合==小型数据量少的项目。 vuex==适合==复杂的单页面应用,涉及到多层次嵌套,多层次组件传值,不同视图对一个状态或者接口的处理。
一、vuex 的五大核心
1.State 2.Getters 3.Mutations 4.Actions 5.Module vuex 四大辅助函数 mapState 、mapGetters 、 mapMutations 、mapActions
-
Demo Github地址 :github.com/babybrother…
二、vuex的工作流程
1.客户端操作事件,dispatch调用一个action 2.对应的action处理参数,比如接口,逻辑操作,传值,commit一个type类型 3.mutation接收一个type类型触发对应的函数,修改state值 4.state更改后对应的view视图在render的作用下重新渲染
下面是我画的流程图
graph LR
A[客户端] -- 事件调用 dispatch --> B((Action))
C(State) -- state修改 render重新渲染 --> A
B -- commit一个type类型 --> D{Mutation}
D -- 匹配对应type操作state --> C
三、vuex项目中的使用
1.首先安装vue项目和vuex 推荐使用npm cnpm yran git git安装 npm安装 ==npm== npm install -g vue-cli vue init webpack hello npm install vuex --save ==yarn== yarn install -g vue-cli vue init webpack hello yarn add vuex

2.新建store文件 在src路径下创建一个store文件,里面创建个index


3.创建基本的vuex结构 在store/index.js中创建基本的vuex结构
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
export const store = new Vuex.Store({
state : {
count:6
},
getters:{
doCount: (state, getters) => {
return getters.doneTodos.length
},
//getters里的第一个参数是state,第二个是getters本身
doneTodos:(state) =>{
return state.count+2
}
},
mutations : {
counts(state, v) {
state.count = v;
},
addNum(state,v) {
if(v){
state.count += v
}else{
state.count ++
}
},
reduceNum(state) {
state.count --
}
},
actions : {
actionNumAdd(v) {
// axios.get("/customer/user_info").then(res => {
// v.commit(addNum, res.data);
// });
//这里可以直接掉接口,并赋值,第一个参数是mutation里对应的名字,第二个参数是传的值
v.commit('addNum', 6);
},
actionNumReduce(v) {
// axios.get("/customer/user_info").then(res => {
// v.commit(addNum, res.data);
// });
//这里可以直接掉接口,并赋值,第一个参数是mutation里对应的名字,第二个参数是传的值
v.commit('reduceNum', 6);
}
}
})
4.接下来就是调用vuex
下面的实例调用都是用的辅助函数,在刚创建好的App.vue实例基础上调用
<template>
<div id="app">
<input v-model="counts" />
<input v-model="getternum" />
<button @click="addnum1">mutation+1</button>
<button @click="actionnum6">action+6</button>
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
import { mapState , mapMutations , mapActions , mapGetters } from 'vuex';
export default {
data(){
return{
}
},
computed:{
...mapState({
counts:(state) => state.count
}),
...mapGetters({
getternum:'doneTodos'
})
},
methods:{
...mapMutations({
addnum:'addNum'
}),
...mapActions({
actionnum:'actionNumAdd'
}),
addnum1(){
this.addnum()
},
actionnum6(){
this.actionnum()
}
}
}
</script>
显示效果 1.初始值是count 6,用 mapState调用 count = 6 2.用mapGetters调用 并基础加了2,所以第二个count为8,并不影响state的值



辅助函数如何使用?及其原理
-
掘金链接: juejin.cn/post/684490…
深入学习vuex状态管理的拆分及模块化处理
-
Demo Github地址:github.com/babybrother…