vuex 仓库store
vuex 仓库store
基本概念
store里面呢可以理解为全局的一个变量，与LocalStorage或者sessionStorage的联系的区别是
store是在内存
LocalStorage或者sessionStorage的数据是在硬盘上
案例效果
思路
1 首先要在store里面设置一个全局变量
2 然后在课程页面的标题引用这个全局变量
3 然后在课程详情页面修改这个全局变量，从而触发课程页面的标题改变。
代码
1 首先要在store里面设置一个全局变量
export default new Vuex.Store({
state: {
// 与LocalStorage或者sessionStorage的联系
// 如果这个地方想要用到永久存储的数据比如LocalStorage或者sessionStorage
// course_page: LocalStorage.数据 这样来拿到数据
course_page:''
},
mutations: {
},
actions: {
}
})
2 然后在课程页面的标题引用这个全局变量
Course.vue
<template>
<div class="page-first">
<!-- 导航条-->
<Navg></Navg>
<h1><span>{{ title_name}}</span></h1>
<!-- <CourseCard></CourseCard>-->
<!-- 被渲染的小组件们-->
<CourseCard :cardcon="card" v-for="card in card_list" :key="card.title"></CourseCard>
</div>
</template>
<script>
.....
export default {
name: "Course",
data(){
return{
//定义一个变量
card_list:[],
title_name: this.$store.state.course_page||'课程主页面默认值楼'
}
},
.....
</script>
<style scoped>
3 课程详情页面修改这个全局变量，从而触发课程页面的标题改变。
CourseDetail.vue
<template>
<div class="course-detail">
<h1>课程详情页面</h1>
<hr>
<div class="edit">
<input type="text" v-model="val">
<button @click="editAction">修改</button>
</div>
....
</template>
<script>
export default {
name: "CourseDetail",
// ---模拟后台数据开始---。
data(){
return{
course_ctx:'',
val:''
}
},
methods:{
editAction(){
if (this.val){
console.log(this.val);
// 直接修改全局变量
this.$store.state.course_page = this.val;
// 通过store自带的方法修改,好处是解耦合，比如可以在方法里规避违法词汇
this.$store.commit('editstate_course_page',this.val)
}
}
},
......
</script>
拓展store的mutations参数
思路：
1 设置方法
2 commit提交方法从而处理全局变量
优势：
通过store自带的方法修改,好处是解耦合，可以在方法里进行逻辑处理比如规避违法词汇等。
代码：
store.js
export default new Vuex.Store({
state: {
// 与LocalStorage或者sessionStorage的联系
// 如果这个地方想要用到永久存储的数据比如LocalStorage或者sessionStorage
// course_page: LocalStorage.数据 这样来拿到数据
course_page:''
},
mutations: {
// 注意这里面的方法只能接受到 state 和 参数1
editstate_course_page(state,new_val){
// state;
state.course_page = new_val;
}
},
actions: {
}
})
CourseDetail.vue
methods:{
editAction(){
if (this.val){
console.log(this.val);
// 直接修改全局变量（不能这么干，因为有可能追踪不到变化）
// this.$store.state.course_page = this.val;
// 我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。
// 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
// 通过store自带的方法修改,好处是解耦合，比如可以在方法里规避违法词汇
this.$store.commit('editstate_course_page',this.val)
}
}
},
