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. 场景：登录信息、购物车、当前播放的音频视频