vuex的封装与使用

vuex的封装与使用

1、安装vuex

	npm install vuex --save

2、配置vuex

	在src目录下新建文件 modules里是根据功能拆分vuex模块，并在index.js里引入，在main.js引入vuex，具体代码请见下方

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import componentStatus from './modules/component-status'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    user,
    componentStatus
  },
  strict: process.env.NODE_ENV !== 'production'
})

// user.js
export default {
  namespaced: true,  // 重要
  state: {
    cookie: localStorage.getItem('cookie')
  },
  getters: {},
  mutations: {},
  actions: {}
}

3、使用

// 获取state的数据
this.$store.state.user.cookie // user 是模块名字. cookie 是 state 里面的属性名字

// 调用getters方法
this.$store.getters['user/getCookie'] // (user 模块名, getCookie是方法名)

// 调用mutations方法
this.$store.commit( 'user/upCookie', cookie) // user 模块名, upCookie方法名, cookie是荷载数据