vuex使用完整版

最新推荐文章于 2025-10-12 18:05:30 发布

原创最新推荐文章于 2025-10-12 18:05:30 发布 · 872 阅读

4 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

场景2需要在vuex中大量管理数据

定义文件和变量

文件设置,在src下添加如下的文件目录

--store

---actions.js

---getters.js

---index.js

---mutation-types.js

---mutations.js

---state.js

第一步设计state.js,这里面确定需要被vuex管理的变量

state.js

import {playMode} from '@/common/js/config.js'   //获取项目的配置---可选
const state={
  singer:{},
  playing:false,
  fullScreen:false,
  playList:[],
  sequenceList:[],
  mode:playMode.sequence,
  currentIndex:-1
};

export default state

第二步设置getters.js映射,也就是确定vuex中能够被取到的值

getters.js

export const singer= state => state.singer;         //简单点说就是把state.singer映射到常量singer上

export const playing= state => state.playing;

export const fullScreen= state => state.fullScreen;

export const playList= state => state.playList;

export const sequenceList= state => state.sequenceList;

export const mode= state => state.mode;

export const currentIndex= state => state.currentIndex;

export const currentSong = (state)=>{                        //getters同时承担了计算属性的功能，将state中的变量二次组装计算抛出新的变量让组件使用
  return state.playList[state.currentIndex] || {}
};

第三步定义如何修改vuex中的值，mutations和actions都可以修改，那么我们需要先定义mutation-type

mutation-type.js

export const SET_SINGER='SET_SINGER';                 //定义修改动作名称，也就是mutations中修改数据的方法名

export const SET_PLAYING_STATE='SET_PLAYING_STATE';

export const SET_FULL_SCREEN='SET_FULL_SCREEN';

export const SET_PLAYLIST='SET_PLAYLIST';

export const SET_SEQUENCE_LIST='SET_SEQUENCE_LIST';

export const SET_PLAY_MODE='SET_PLAY_MODE';

export const SET_CURRENT_INDEX='SET_CURRENT_INDEX';

第四步定义mutations,定义vuex中数据的修改方法

mutations.js

import * as types from './mutation-types'

const mututations={
  [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
  },
  [types.SET_PLAYLIST](state,list){
    state.playList=list
  },
  [types.SET_SEQUENCE_LIST](state,list){
    state.sequenceList=list
  },
  [types.SET_PLAY_MODE](state,mode){
    state.mode=mode
  },
  [types.SET_CURRENT_INDEX](state,index){
    state.currentIndex=index
  }
};

export default mututations;

第五步定义action----mutation通常是每个方法修改单个值，而action通常是每个方法同时修改多个值，action中还会做些异处理---这里经常是根据业务逻辑写方法，一般是之后边开发边写，开始的时候不需要定义

action.js

import * as types from './mutation-types'  
export const selectPlay=function ({commit,state},{list,index}) {    //selectPlay一个方法执行多个commit
  commit(types.SET_PLAYLIST,list);
  commit(types.SET_SEQUENCE_LIST,list);
  commit(types.SET_CURRENT_INDEX,index);
  commit(types.SET_FULL_SCREEN,true);
  commit(types.SET_PLAYING_STATE,true);
};

第六部注册，所有的文件定义好了，就可以注册了

index.js

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'    //辅助调试插件引入，在vuex中的值发生改变的时候会自动在控制台打出变量改变前后的值
Vue.use(Vuex);

const debug= process.env.NODE_ENV != 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict:debug,
  plugins:debug?[createLogger()]:[]         //让调试插件只在开发时开启
})

在main,js中

import store from './store'    //本质上是引入index.js
new Vue({
    el: '#app',
    router,
    store,                                           //store实例注册到vue实例中
    render: h => h(App)
})

使用vuex中的变量

1getter---获取vuex中的变量并使用

import {mapGetters} from 'vuex';
computed:{
 ...mapGetters([  //获取暴露出vuex中的变量，这里暴露出来的变量直接当计算属性使用
    'fullScreen',
    'playList',
    'currentSong',
    'playing'
  ]), 
},

2mutation--修改vuex中的某个值

import {mapMutations} from 'vuex';
methods:{
  setFullScreen(){
      this.setFullScreen(true); //直接调用方法提交修改vuex中的变量
  },
    stopPlay(){
        this.setPlayingState(false);
    },
    ...mapMutations( //不能直接修改vuex中的变量,通过映射方法传参数的方式提交改变vuex中的参数
        {
            setFullScreen:'SET_FULL_SCREEN',
            setPlayingState:'SET_PLAYING_STATE'
        }
    )
},

3action---使用actions.js中的方法改变vuex中的变量

import {mapActions} from 'vuex'  //action中定义一次改变vuex中多个变量的方法
methods:{
  selectItem(song,index){
    this.selectPlay({   //直接调用并传入需要的参数
      list:this.songs,
      index:index
    })
  },
  ...mapActions([  //暴露出actions中的方法，作为方法直接调用
    'selectPlay'
  ])
},

简易版查看：https://blog.youkuaiyun.com/github_39274378/article/details/81542554