vuex狀態管理簡單入門

1.安裝vuex

npm i --save-dev vuex
複製程式碼

2.為了方便管理，在src目錄下新建資料夾store

新建index.js進行初始化
新建state.js進行資料儲存
新建mutations.js儲存資料修改的方法
複製程式碼

3.開始編寫配置檔案

index.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
})
複製程式碼

在main.js中引入並例項化

import store from '@/store/index'
new Vue({
  el: '#app',
  router,
  // 例項化store
  store,
  render: h => h(App)
})
複製程式碼

4.到這裡vuex已經配置完成，只要在state.js中寫入資料即可在專案中引用了

state.js

const state = {
//這裡以常用的使用者id為例，可以是任意你想儲存的資料
  userId: '0123456789'
}
export default state
複製程式碼

5.現在你就可以在專案中的任何元件取到使用者id，方法如下(關於map的作用就自己查閱資料吧)

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

6.關於修改state中屬性的值

還是以使用者id為例，每個使用者儲存的值必然是不同的，這個值需要用mutations中的方法來修改

mutations.js

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

export default mutations
複製程式碼

7.在需要儲存使用者id的地方呼叫mutations中的方法進行儲存

import { mapMutations } from 'vuex'
export default {
// 引入方法save_userId方法
  methods: {
    ...mapMutations({
      save_userId: 'save_userId'
    })
  }
// 儲存或修改資料
  created () {
	  this.save_userId('987654321')
  }
}
複製程式碼

8.到這裡資料的儲存也完成了,取資料只要用第5步的方法即可，vuex的簡單使用也不復雜，希望剛入門的小夥伴看完有所收穫吧，之後有空在推出與actions相關的部分。