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)
                }
            }
        },