vuex状态管理

安装 vuex；

npm install vuex --save

1.新建store文件夹，存放 actions.js / getters.js / mutations.js / state.js；

2.将以上四个文件引入 store.js 文件中

/**
 * vuex的核心对象模块：store
 */
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)



export default new Vuex.Store({
  state, //状态对象
  mutations, //包含多个更新state函数的对象
  actions, //包含多个对应事件回调函数的对象
  getters //包含多个getter计算属性
})

3.在min.js中引入该 store.js文件，并放入 vue 实例

// 引入store
import store from './store/store.js'


new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store,
  components: { App },
  template: '<App/>'
})

 个例

/**
 * state.js
 * 各数据对象
 */
export default {
    user: [] // 存放用户信息
}



/**
 * actions.js
 * 包含多个接收组件通知触发mutation调用间接更新状态的方法的对象
 */
export default {
  set_user({commit}, data) {
    commit('set_user', data);
  }
}



/**
 * getters.js
 * 包含所有基于state的getter计算属性的对象
 */
import state from "../store/state";
export default {
  getUser:state => state.user,
}



/**
 * mutations.js
 * 包含多个由action触发去直接更新状态的方法的对象
 */
export default {
  set_user(state,data){
    state.user= data;
    // 将数据放入缓存中(这里主要是为了防止刷新页面数据丢失)
    sessionStorage.setItem('user',data);
  }
}

 使用

computed:{
  user:{
    get(){return this.$store.state.user;},
    set(){}
  }
},

 

注：后来项目使用的时候，发现只要页面一刷新，vuex 保存的数据就全部丢失了，于是各种Google百度，发现前辈都是将之存入缓存中，不多说，贴上

// 在 mutations.js 文件中将数据存入缓存
参照如上 mutations.js写法,具体是存入 session 或者是 localStorage 就看大家的项目需求了
这里以 session 为例

2.在 store.js 文件中加入以下代码

//防止页面刷新vuex中的数据丢失
for (var item in state) {
  sessionStorage.getItem(item) ? state[item] = JSON.parse(sessionStorage.getItem(item)) :   false;
}