vuex在实例化前与在页面中的使用

一、在项目中安装依赖包

yarn add vuex -D
yarn add vuex-persistedstate -D // 储存在本地的方法依赖

二、新建一个store文件夹在之中建立6个js文件：
1、index.js

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
import state from './state'
import getters from './getters'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

const store = new Vuex.Store({
  actions,
  mutations,
  state,
  getters,
  plugins: [createPersistedState({
    key: 'warehouse',
    reducer (val) {
     // 使用 reducer 只把 userInformat储存在localStorage中，其他值不会，如需要就在return 中添加
      return {
        userInformat: val.userInformat
      }
    }
  })]
})

export default store

2、state.js

const state = {
  breadcrumb: [{
    path: '',
    text: ''
  }],
  userInformat: {
    userId: '',
    userName: '',
    mobileno: '',
    token: ''
  }

}

export default state

3、types.js

// 此内容也可以直接在用到的文件中定义
export const SET_BREADCRUMB = 'SET_BREADCRUMB'
export const GET_BREADCRUMB = 'GET_BREADCRUMB'
export const SET_USERS = 'SET_USERS'
export const GET_USERS = 'GET_USERS'

4、mutations.js

import { SET_BREADCRUMB, SET_USERS } from './types'

const mutations = {
  [SET_BREADCRUMB] (state, data) {
    state.breadcrumb = data
  },
  [SET_USERS] (state, data) {
    state.userInformat = data
  }
}

export default mutations

5、getters.js

const getters = {
  getBreadcrumb: (state) => state.breadcrumb,
  userInformat: (state) => state.userInformat
}

export default getters

6、actions.js

const actions = {

}

export default actions

三、在index.js(main.js)引入

import store from './store/index.js'
// 注释： 如需在new Vue之前使用方法 => 通过 store.state
// 例如： const token = store.state.userInformat.token

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

四.在页面中使用

import { mapMutations } from 'vuex'
 mounted () {
 
    // 修改breadcrumb值
    this.SET_BREADCRUMB([
      {
        text: '产品线管理'
      }
    ])
  }
  methods: {
   ...mapMutations(['SET_USERS','SET_BREADCRUMB']) // 引入 SET_USERS 方法
 
    // 修改userInformat值
   this.SET_USERS({
    userId: '1',
    userName: '二狗子',
    mobileno: '11234567',
    token: '23456766776345'
   })
   
	//	获取 userInformat  值
	const userInformat = this.$store.state.userInformat
  }