1.关于状态管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
大家可以思考一下,组件之间的传值有哪些?有父子通讯,兄弟组件通讯......但是传参对于多层嵌套就显得非常繁琐,代码维护也会非常麻烦。因此vuex就是把组件共享状态抽取出来以一个全局单例模式管理,把共享的数据函数放进vuex中,任何组件都可以进行使用。
2.vuex的五个状态(后续补充)
vuex中一共有五个状态 State Getter Mutation Action Module
下面是一个调用vuex的实例
<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>
3.Vuex在项目中的配置和使用
1.首先安装vue项目和vuex
方法一:在创建Vue项目的时候,在选择配置项的这一步,选择 “Vuex”这个模块。
方法二:如果创建Vue项目的时候没有安装Vuex模块,可以直接— npm i vuex -s 下载
2.新建store文件
注意:如果你在创建Vue项目的时候,配置了Vuex这个模块,你的项目中就有store这个文件。,可以跳过这一步。
如果没有:
在src路径下创建一个store文件,里面创建个index
在main.js的入口文件引入并在new vue中初始化
注意:引用的时候不加{ }会报错
————————————————
版权声明:本文为CSDN博主「小张快跑。」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/io_123io_123/article/details/123723930
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
},
// 相当于Vuex中的计算属性
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>