Vuex 狀態管理 常規項目結構

Vuex是什麼

1. Vuex是一個專爲Vue.js應用程序開發的狀態管理模式。
2. 當我們遇到多個組件共享狀態時，多層組件的傳值非常繁瑣，不利於維護，因此我們把組件的共享狀態抽取出來，以一個單例模式管理，在這種模式下，不管在哪個組件都可以獲取狀態或觸發行
3. 簡單來講就是實現數據共享

安裝

npm install vuex --save

使用

main.js

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

store 文件夾
每一個Vuex應用的核心就是store（倉庫），它包含着應用中大部分的狀態（state）,store是內存機制，而不是緩存機制，當前頁面一旦刷新揮着通過路由跳轉亦或是關閉，都會導致store初始化。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
     state:{ 
         conunt=1,
         list:[1,34,5,3,2,3,4,5,1,55,21]
       },
         getters:{
    arr(state){
      return state.list.filter(value=>value>5)
    },
    arr2(state){
      return state.list.filter(value=>value<5)
    }
  },
  mutations:{
    // 2.修改倉庫數據的唯一途徑(mutations)
    // 注意：這裏只能寫同步代碼，不能寫異步代碼（setTimeout,setInterval,Promise,Ajax,axios）
    increment (state,obj){
      state.count+=obj.num
    }
  }
       
 })

HelloWorld.vue

<script>
import {mapState,mapGetters,mapMutations} from 'vuex'
export default {
  name: 'HelloWorld',
  computed:{
    // 映射形式：對象形式（左邊是當前組件內的屬性名稱、右邊是倉庫的數據名稱）
    ...mapState({
      num:'count',
      list:'list'
    }),
    list(){
      return this.$store.state.list
    },
    age(){
      return 19
    },
 
    // 映射形式：數組形式（直接寫一個名字，代表組件內的屬性名和倉庫裏的數據名稱是一致的）
    ...mapGetters(['arr2'])
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
  //修改倉庫數據 寫法一
    ...mapMutations({
      plus:'increment'
    }),
    add(){
      this.plus({num:2})
    },
     //修改倉庫數據 寫法二
    plus(){
      // this.$store.commit('increment',2) //調用mutations裏的函數，修改倉庫數據
      this.$store.commit({
        type:'increment',
        num:2
      })
    }
  }
}
</script>

常規項目結構 vuex 模塊化

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

state.js vuex 初始數據

const state = {
  singer: {},
  playlist: [],
  sequenceList: [],
  currentIndex: -1,
  topList: {},
}
export default state 

getters.js 提交方法

export const singer = state => state.singer
export const playing = state => state.playing
export const currentIndex = state => state.currentIndex
export const currentSong = (state) => {
  return state.playlist[state.currentIndex] || {}
}

mutation-type.js 定義mutation 方便後期修改

export const SET_SINGER = 'SET_SINGER'
export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'
export const SET_TOP_LIST = 'SET_TOP_LIST'

mutations.js 執行方法 注：mutations 只能用於同步操作

import * as types from './mutation-types'
const mutations = {
  [types.SET_SINGER](state, singer) {
    state.singer = singer
  },
  [types.SET_PLAYING_STATE](state, flag) {
    state.playing = flag
  },
  [types.SET_FULL_SCREEN](state, flag) {
    state.fullScreen = flag
  },
}
export default mutations

actions.js 執行mutation 方法 注：可執行異步操作 本質是通過提交mutation 來改變 state
(mutation是修改state數據的唯一途徑)

import * as types from './mutation-types'
export const randomPlay = function ({commit}, {list}) {
  commit(types.SET_SEQUENCE_LIST, list)
  commit(types.SET_PLAYLIST, list)
  commit(types.SET_CURRENT_INDEX, 0)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}

vuex 的使用場景

1. 應用遇到多個組件共享狀態時，使用vuex
2. 涉及非父子組件之間跨組件共享數據
3. 場景：登錄信息、購物車、當前播放的音頻視頻