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

整个过程就是先存储后调用的一个过程。