VUEX的使用

1.引入VUEX

1.通过vue ui引入
2.手敲npm install vuex --save

2.VUEX的项目结构

image

index.js:我们组装模块并导出 store 的地方
modules:用来存放vuex的数据模块

3.index.js文件

这个文件是对所有小模块的整合

import Vuefrom 'vue'
import Vuexfrom 'vuex'
import loginfrom "./modules/login";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  login
  }
})

modules：存储的是数据模块

4.数据模块的编写

export default {
  state: {
    userId: ''
  },
  getters: {
    userId: state => state.userId
  },
  mutations: {
    SET_USER_ID (state, param) {
      state.userId = param
    }
  },
  actions: {
    SET_USER_ID (state, param) {
      state.commit('SET_USER_ID', param)
    }
  }
}

state:这里定义需要存放的数据
state的数据获取方式：可以通过mapGetters来获取
引入mapGetters

import { mapGetters } from 'vuex';

将mapGetters写入computed,多个参数用,隔开

computed: {
    ...mapGetters(['userId'])
},

getters:这里是对获取数据get方法的重写，不需要包装的数据直接返回即可。
mutations:这里存放数据处理的函数，一般数据的改变在此处理。

mutations的使用方式

this.$store.commit('SET_USER_ID', '123');

actions:使用actions最终提交的mutations。在actions内可以进行异步操作。
actions的使用方式

this.$store.dispatch('SET_USER_ID')