vuex状态管理简单入门

npm i --save-dev vuex

新建index.js进行初始化
新建state.js进行数据存储
新建mutations.js保存数据修改的方法

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
    // 存储数据
    state,
    // 修改方法
    mutations
})

import store from '@/store/index'
new Vue({
  el: '#app',
  router,
  // 实例化store
  store,
  render: h => h(App)
})

const state = {
//这里以常用的用户id为例，可以是任意你想保存的数据
  userId: '0123456789'
}
export default state

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      userId: state => state.userId
    })
  },
  // 然后在你需要的地方使用this.userId即可，如
  created () {
    console.log(this.userId)
  }  
}

const mutations = {
//save_userId是方法名， userId是传入的修改值
  save_userId (state, userId) {
    state.userId = userId
  }
}
export default mutations

import { mapMutations } from 'vuex'
export default {
// 引入方法save_userId方法
  methods: {
    ...mapMutations({
      save_userId: 'save_userId'
    })
  }
// 保存或修改数据
  created () {
    this.save_userId('987654321')
  }
}