04、使用vuex

参考下列文章https://segmentfault.com/a/1190000015782272
1、下载npm install vuex --save
2、在src下面新建store/index.js文件

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

import index from '../pages/Index/modules/mutation'

const store = new Vuex.Store({
    modules:{
        index
    }
    
})

export default store

3、在main.js里面引入store

WX20190327-170937.png

4、在pages文件下的Index文件夹下面新建文件夹

//mutation.js
import {CHANGE_FOOTER,CHANGENUM,UPDATE_USERINFO} from './mutationTypes'
//要设置的全局访问的state对象
const state = {
  showFooter: true,
  changeNum: 0,
  userInfo:''
}

//实时监听state值的变化(最新状态)
const getters = {
  showFooter: state => state.showFooter,
  changeNum: state => state.changeNum,
  userInfo:state=>state.userInfo 
}

//自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
const actions = {
  changeFooter(context,data){
    context.commit(CHANGE_FOOTER,data)
  },
  changeNum(context, data) {
    context.commit(CHANGENUM, data)
  },
  updateUserInfo(context, data) {
    context.commit(UPDATE_USERINFO, data)
  }
}

//自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
const mutations = {
  [CHANGE_FOOTER](state,data) {
    state.showFooter = data
  },
  [CHANGENUM](state, data) {
    state.changeNum += data
  },
  [UPDATE_USERINFO](state,data){
    state.userInfo = data
  }
}

export default {
  namespaced: true, //用于在全局引用此文里的方法时标识这一个的文件名
  state,
  getters,
  mutations,
  actions
}

//mutationTypes.js
export const CHANGE_FOOTER ='INDEX/CHANGE_FOOTER'
export const CHANGENUM ='INDEX/CHANGENUM'
export const UPDATE_USERINFO ='INDEX/UPDATE_USERINFO'

5、使用的方法

更新store的值
this.$store.dispatch('index/updateUserInfo',userInfo)
console.log(this.$store.state.index.userInfo.token)
//使用计算属性时刻监听
...mapState({ 
   showFooter: state=>state.index.showFooter
})

//用mapGetters来获取mutation.js里面的getters
 ...mapGetters('index',{ 
   showFooter:'showFooter'
})