(十四) VueX 的使用 及相关的操作

VueX 的使用 及相关的操作

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

里面会有5个相应的属性:(网上找的)

npm之后 在全局注册

这vueX中这样配置：

//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
总结：
我觉得本身这个东西就是用来数据存储的吗，所以为啥不能改成数据是一直不变的，可能作者有自己的意图，我们都是搬砖的，底层还没有接触到吧，目前用到的就是修改和使用，其余的还没有，但是尽量去系统的看，要不意义不大，
一开始是遇见问题解决问题，后来就是寻找问题了，你做一件事情，考虑到所有的问题，才能写得靠谱，对吧