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. 場景：登入資訊、購物車、目前播放的音頻視訊