zoukankan      html  css  js  c++  java
  • (十四) VueX 的使用 及相关的操作

    VueX 的使用 及相关的操作

    安装:(一般都是在建设项目的时候直接进行选择)
    npm install vuex --save
    

    文件位置

    里面会有5个相应的属性:(网上找的)在这里插入图片描述

    npm之后 在全局注册
    在这里插入图片描述

    //Vuex的引入
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
    //在使用的时候进行数据存储的位置,就是变量的位置
      state: {
      	//例如:
      	ModifytData:"";
      },
      mutations: {
    	//简单来说就是在这个位置进行修改数据, 可以不写方法,直接修改但是不推荐,还是用这个
          modifyApproveState(state, ModifytData) {
              state.ModifytData= ModifytData;
          },
      },
      //Action可以进行一些异步的操作,然后再去触发mutation,所以与后端的一些接口都必须放在action里面,目的就是进行异步操作,我没有使用过
      actions: {
      },
      modules: {
      }
    })
    

    常规使用:

    1.在页面上获取相应的使用数据

     this.$store.state.变量名
    

    2.进行相应的数据修改

     this.$store.commit('mutations修改的方法',数据值);
    

    注意 有的时候需要Vuex的值一直保持不变

    所以可以直接把vuex存储到 localStorage 中 这样就可以页面刷新也保持的数据不变

    操作: 在页面刷新的时候进行数据存储 加载的时候再将数据取出来 (直接存的是state)

    在APP.vue中的

         created() {
                //   在页面加载时读取sessionStorage里的状态信息
                if (localStorage.getItem('state')) {
                    this.$store.replaceState(Object.assign({}, this.$store.state,
                    JSON.parse(localStorage.getItem('state'))))
                }
               //   页面刷新时将state数据存储到sessionStorage中
                window.addEventListener('beforeunload', () => {
                    localStorage.setItem('state', JSON.stringify(this.$store.state))
                })
            }
    

    这样就可以保持数据一直不变 修改使用都没有任何问题

    注意:有坑

    比如你在这个页面进行了 state的数据修改操作 然后我打开了一个新的标签页 在新页面上进行使用vuex 就会发现数据没有被修改
    原因: 你修改了 vuex 但是没有直接存储到本地 只有页面刷新的时候才会存储,打开新的标签页的时候,查询是否有 localStorage 是有的 直接就替换了,你直接修改的没有存进去,所以导致数据没有变,
    解决办法:

    //你修改了 就直接把state存储一遍就行了(只有在打开新的标签页的时候才需要)
    localStorage.setItem('state', JSON.stringify(this.$store.state))
    

    写的还行吧 但是我感觉好多没看懂 https://blog.csdn.net/qq_41772754/article/details/88074103
    总结:
    我觉得本身这个东西就是用来数据存储的吗,所以为啥不能改成数据是一直不变的,可能作者有自己的意图,我们都是搬砖的,底层还没有接触到吧,目前用到的就是修改和使用,其余的还没有,但是尽量去系统的看,要不意义不大,
    一开始是遇见问题解决问题,后来就是寻找问题了,你做一件事情,考虑到所有的问题,才能写得靠谱,对吧

  • 相关阅读:
    【贪心算法】POJ-3040 局部最优到全局最优
    【贪心算法】POJ-1017
    【贪心算法】POJ-2393 简单贪心水题
    【贪心算法】POJ-3190 区间问题
    项目选题报告(团队)
    结对项目第一次作业——原型设计
    第三次作业团队展示
    软工实践第二次作业——数独
    软件工程实践第一次作业--准备
    字符串
  • 原文地址:https://www.cnblogs.com/tcz1018/p/13509370.html
Copyright © 2011-2022 走看看