vuex状态管理的使用

一、创建store,单个store的使用

1、

/*** 该文件用于创建vuex中最核心的store*///引入Vuex
import Vuex from 'vuex';
import Vue from "vue";//使用vuex来集中管理状态,必要
//new store的前提是必须要使用Vuex插件
Vue.use(Vuex);//创建actions(本质就是对象) 用于响应组件中的动作
const actions = {//收到上下文对象(包含commit)和dispatch过来的值// increment(context, value){//     context.commit('INCREMENT', value);// },// decrement(context, value){//     context.commit('DECREMENT', value);// },incrementIfOdd(context, value){// console.log(`action中的incrementIfOdd被调用`);// console.log('处理了一些事情');// context.dispatch('demo1', value);if(context.state.sum % 2) {console.log('@')context.commit('INCREMENT',value);// context.state.sum += 1;//这样可以实现但是记住本次对状态的改变开发者工具将无法捕获，因为开发者工具是对mutations对话的}},incrementWait(context, value){setTimeout(() => {context.commit('INCREMENT', value);},500)},// demo1(context, value){//     console.log('处理了一些事情---demo1');//     context.dispatch('demo2', value);// },// demo2(context, value){//     console.log('在action的demo中完成最终的逻辑');//     if(context.state.sum % 2) {//         console.log('@')//         context.commit('INCREMENT',value);//     }// }
}//创建mutations(本质也是对象) 用于修改数据(state)
const mutations = {//收到state和要操作数valueINCREMENT(state, value) {state.sum += value;},DECREMENT(state, value) {state.sum -= value;},
}//准备getters用于加工state，将其共享于各个组件当中
const getters = {bigSum(state){return state.sum * 10;}
}//准备state(数据) 存储数据
//类似于各个组件里的computed(计算属性),只不过它是共享的
const state = {sum: 0,school: 'Wust',subject: 'Computer Science',
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
});

2、main.js中引入

//引入Vue
import Vue from "vue";
//引入App
import App from './App';
//引入store
import store from './store';//关闭Vue的生产提示
Vue.config.productionTip = false;new Vue({el: '#app',store,render: h => h(App),
});

3、store的使用

<template><div><h1>当前求和为: {{ sum }}</h1><!--让其收集到的数据全是number类型的 number修饰符--><h3>当前求和放大3倍为:{{ bigSum }}</h3><h3>我在{{ school }}, 学习{{ subject }}</h3><select v-model.number="n"><!--让所有的value全部绑定为数字--><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementIfOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>
import { mapState, mapGetters, mapMutations, mapActions} from 'vuex';
export default {//计数组件name: "Count",data(){return {n: 1,// 代表用户在select框开始的时候选择的数字}},computed:{//借助mapState从state中生成计算属性,对象写法// ... mapState({//   sum:'sum',//   school: 'school',//   subject: 'subject'// }),//借助mapState从state中生成计算属性,数组写法(即代表了生成的计算属性名为sum，同时也代表了从state找到sum)... mapState(['sum', 'school', 'subject']),//借助mapGetters从getters中生成计算属性,对象写法// ...mapGetters({ bigSum: 'bigSum' }),//借助mapGetters从getters中生成计算属性,数组写法...mapGetters(['bigSum']),},methods:{// increment(){//   this.$store.commit('INCREMENT', this.n);// },// decrement(){//   this.$store.commit('DECREMENT', this.n);// },//借助mapMutations生成对应方法，方法会调用commit去联系mutations，对象写法...mapMutations({increment: 'INCREMENT',decrement: 'DECREMENT',}),//借助数组写法生成方法,但注意你生成的方法名和mutations里对应的方法名将会一样的// ...mapMutations(['increment', 'decrement']),// incrementOdd(){//   this.$store.dispatch('incrementIfOdd', this.n);// },// incrementWait(){//   this.$store.dispatch('incrementWait', this.n);// }//借助mapMutations生成对应方法，方法会调用dispatch去联系actions，对象写法// ...mapActions({//   incrementIfOdd: 'incrementIfOdd',//   incrementWait: 'incrementWait',// }),...mapActions(['incrementWait', 'incrementIfOdd']), //数组写法,同上},
}
</script><style scoped>button{margin-left: 5px;}
</style>

二、多个store的使用

count.js

//求和功能配置
export default  {namespaced: true,state:{sum: 0,school: 'Wust',subject: 'Computer Science',},getters:{bigSum(state){return state.sum * 10;}},actions:{incrementIfOdd(context, value){// console.log(`action中的incrementIfOdd被调用`);// console.log('处理了一些事情');// context.dispatch('demo1', value);if(context.state.sum % 2) {console.log('@')context.commit('INCREMENT',value);// context.state.sum += 1;//这样可以实现但是记住本次对状态的改变开发者工具将无法捕获，因为开发者工具是对mutations对话的}},incrementWait(context, value){setTimeout(() => {context.commit('INCREMENT', value);},500)},},mutations:{INCREMENT(state, value) {state.sum += value;},DECREMENT(state, value) {state.sum -= value;},}
}

person.js

//人员列表配置
import axios from "axios";
import {nanoid} from "nanoid";
export default {namespaced: true,state:{personList: [{ id: '001', name: '张三'}],},getters:{firstPersonName(state){return state.personList[0].name;}},actions:{addPersonWang(context, value){if(value.name.indexOf('王') === 0){context.commit('ADD_PERSON',value);}else{alert('添加的人员必须姓王');}},//联系后端apiaddPersonServer(context){axios.get(`https://api.uixsj.cn/hitokoto/get?type=social`).then(res => context.commit('ADD_PERSON',{id: nanoid(),name: res.data})).catch(e => alert(e.message));}},mutations:{ADD_PERSON(state, value){state.personList.unshift(value);}}
}

3、store文件中index.js中引入

/*** 该文件用于创建vuex中最核心的store*///引入Vuex
import Vuex from 'vuex';
import Vue from "vue";
import count from './count';
import person from './person';//使用vuex来集中管理状态,必要
//new store的前提是必须要使用Vuex插件
Vue.use(Vuex);//创建并暴露store
export default new Vuex.Store({modules:{count,person}
});

4、mian.js中引入

//引入Vue
import Vue from "vue";
//引入App
import App from './App';
//引入store
import store from './store';//关闭Vue的生产提示
Vue.config.productionTip = false;new Vue({el: '#app',store,render: h => h(App),
});

5、组件中使用store

<template><div><h1>当前求和为: {{ sum }}</h1><!--让其收集到的数据全是number类型的 number修饰符--><h3>当前求和放大3倍为:{{ bigSum }}</h3><h3>我在{{ school }}, 学习{{ subject }}</h3><h3 style="color: red">下方列表的总人数 {{ personList.length }}</h3><select v-model.number="n"><!--让所有的value全部绑定为数字--><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementIfOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>
import { mapState, mapGetters, mapMutations, mapActions} from 'vuex';
export default {//计数组件name: "Count",data(){return {n: 1,// 代表用户在select框开始的时候选择的数字}},computed:{//借助mapState从state中生成计算属性,对象写法// ... mapState({//   sum:'sum',//   school: 'school',//   subject: 'subject'// }),//借助mapState从state中生成计算属性,数组写法(即代表了生成的计算属性名为sum，同时也代表了从state找到sum)... mapState('count', ['sum', 'subject', 'school']),...mapState('person', ['personList']),//借助mapGetters从getters中生成计算属性,对象写法// ...mapGetters({ bigSum: 'bigSum' }),//借助mapGetters从getters中生成计算属性,数组写法...mapGetters('count',['bigSum']),},methods:{// increment(){//   this.$store.commit('INCREMENT', this.n);// },// decrement(){//   this.$store.commit('DECREMENT', this.n);// },//借助mapMutations生成对应方法，方法会调用commit去联系mutations，对象写法...mapMutations('count',{increment: 'INCREMENT',decrement: 'DECREMENT',}),//借助数组写法生成方法,但注意你生成的方法名和mutations里对应的方法名将会一样的// ...mapMutations(['increment', 'decrement']),// incrementOdd(){//   this.$store.dispatch('incrementIfOdd', this.n);// },// incrementWait(){//   this.$store.dispatch('incrementWait', this.n);// }//借助mapMutations生成对应方法，方法会调用dispatch去联系actions，对象写法// ...mapActions({//   incrementIfOdd: 'incrementIfOdd',//   incrementWait: 'incrementWait',// }),...mapActions('count',['incrementWait', 'incrementIfOdd']), //数组写法,同上},
}
</script><style scoped>button{margin-left: 5px;}
</style>

<template><div><h1>人员列表</h1><h2 style="color:skyblue;">Count组件求和为:{{ sum }}</h2><h3>列表中第一个人的名字是:{{ firstPersonName }}</h3><input type="text" placeholder="请输入名字" v-model="name" /><button @click="add">添加</button><button @click="addWang">添加一个姓王的人</button><button @click="addPersonServer">添加一个人名字随机</button><ul><li v-for="p in personList" :key="p.id">{{ p.name }}</li></ul></div>
</template><script>
// import { mapState } from 'vuex';
import {nanoid} from "nanoid";
export default {name: "Person",data(){return {name: '',}},methods:{add(){const perObj = {id: nanoid(),name: this.name,}console.log(perObj);this.name = '';this.$store.commit('person/ADD_PERSON', perObj);},addWang(){const perObj = {id: nanoid(),name: this.name}this.$store.dispatch('person/addPersonWang', perObj);this.name = '';},addPersonServer(){this.$store.dispatch('person/addPersonServer');}},computed:{// ...mapState(['personList']),personList(){return this.$store.state.person.personList;},sum(){return this.$store.state.count.sum;},firstPersonName() {return this.$store.getters['person/firstPersonName'];}},
}
</script><style scoped>button{margin-left: 5px;}ul{margin-top: 5px;}
</style>