VueX了解

 

1、 安装vuex

npm install vuex -S

npm install xxx -S，也就是 npm install module_name --save 写入dependencies(生产环境)
npm install xxx -D，也就是 npm install module_name --save-dev 写入devDependencies（开发环境）

2、创建store目录

 state.js

//前端数据库
export default {



}

mutation.js

//改变sate中的值(同步)
export default {
  methodName: (state, payload) => {
    state.属性名 = payload.属性名;
  }
}

action.js

export default{



}

getters,js

export default {
  methodName: (state) => {
    return state.属性名;
  }
}

index.js

import Vue from "vue"
import Vuex from "vuex"
import actions from "@/store/actions"
import getters from "@/store/getters"
import mutations from "@/store/mutations"
import state from "@/store/state"
Vue.use(Vuex)
const store=new Vuex.Store({state,getters,actions,mutations})
export default store

3、main.js引入store

import store from './store/index'

 并且在vue实例中添加store

4、在组件中使用

首先需要在store中定义出属性，再定义mutation中的方法，用以设置store中的属性，再getters中定义得到属性值得方法。

跨组件传值：

数据表格修改

this.$store.commit('setRowChance', {
            rowChance: row
});

可以将数据表格中的row作为整体传递过来（scope.row）

然后在目标组件

this.form = this.$store.getters.getRowChance;

这里的form只需要将属性名与数据表格中的列名一致就可以接受到全部参数了。

进阶

vuex在刷新时会将其中的数据进行刷新，所以一些放在vuex中的数据会在刷新网页值丢失，这个时候就需要将vuex中的值放入sessionStorage里。

只需要在App.vue中添加代码：

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