vue中vuex的建立和使用

vuex的使用

1.安装

npm install vuex --save

2.在建立的store仓库下的index.js文件中引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

4.如果要使用vuex首先必须创建一个实例store,我们称之为仓库，利用这个仓库来对状态进行管理。

const store = new Vuex.Store({
    state,
    mutations,
    actions
})

5.通常我们store文件下创建三个文件
（1）index.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

import mutations from "./mutations"
import actions from "./actions"

const state = {
 chinesePeopleID:"",   //存储一个变量
}

const store = new Vuex.Store({
    state,
    mutations,
    actions
})

export default store

（2）action.js文件

const actions = {
STORE_CHINESE_PEOPLE_ID ({ commit }, peopleID) {
        commit("STORE_CHINESE_PEOPLE_ID", peopleID)
  },
}

export default actions

（3）mutation.js

const mutations = {
  "STORE_CHINESE_PEOPLE_ID" (state, peopleID) {
        state.chinesePeopleID = peopleID
     },
    }
export default mutations

总结 上述是整个仓库创建需要建立的文件夹，同时每一个文件又是相互关联的，我们可以通过下面这个图，了解到他们之间的主要关系.

结合具体实际来使用vuex

使用场景：
\qquad当前父级页面向子级页面跳转，涉及一个数据的传递，常规的路由的跳转可以实现，参数也可以利用AES加密后进行传输，同时子级页面使用了import方式引入了一个子组件，但是此时要将这个参数从父级组件传递到子组件调用的组件，此时想到的没办法直接页面之间的跳转的传递参数，因为引入组件与子组件的传递数据，可以使用父组件向子组件传递数据这种方式，但是这里我们使用vuex的方式来解决这个问题。具体步骤如下：
（1）首先我们将要使用的变量的数据存储起来

this.$store.dispatch("STORE_CHINESE_PEOPLE_ID", this.peopleID)

使用上述这个指令将this.peopleID这个变量存储在store这个仓库中

（2）在项目中的任何组件的文件中想使用到这个变量使用下面的指令

this.peopleID =  this.$store.state. chinesePeopleID

整个过程就是先存储后调用的一个过程。
注意： 特别要注意的一点就是，vuex的保存只是一个本地保存的过程，保存在其中的数据可能造成数据丢失的问题，所以实际vue项目中我们会将vuex中的内容变换成浏览器存储sessionStorage。实现的具体流程如下：
（1）在App.vue文件中created()添加执行函数如下：

//页面刷新的时候，将vuex的信息保存到essionStorage中
storeDataWhenRefresh() {
            // 在页面刷新时将vuex里的信息保存到sessionStorage里
            window.addEventListener("beforeunload", ()=>{
                setSessionStore("store", this.$store.state)
            })
        },

//页面加载时读取sessionStorage里的状态信息，
getDataBeforeLoading() {
            // 在页面加载时读取sessionStorage里的状态信息， 因为页面加载时，会自动执行created中的内容
            let tmpStore = getSessionStore("store")
        },

（2）在common/js/localSessionStorage.js文件下

// 存入sessionstorage
export const setSessionStore = (name, content) => {
    if (!name) return
    if (typeof content !== "string") {
        content = JSON.stringify(content)
    }
    window.sessionStorage.setItem(name, content)
}

// 获取sessionstorage数据
export const getSessionStore = (name) => {
    if (!name) return
    try {
        return JSON.parse(window.sessionStorage.getItem(name))
    } catch (err) {
        return window.sessionStorage.getItem(name)
    }
    // return window.sessionStorage.getItem(name)
}

// 删除sessionstorage数据
export const removeSessionStore = (name) => {
    if (!name) return
    return window.sessionStorage.removeItem(name)
}

// clear清除sessionstorage数据
export const clearSessionStore = () => {
    window.sessionStorage.clear()
}