vuex使用完整版

2021-08-22 13:36:41 字數 3477 閱讀 3913

場景2需要在vuex中大量管理資料

定義檔案和變數

檔案設定,在src下新增如下的檔案目錄

--store

---actions.js

---getters.js

---index.js

---mutation-types.js

---mutations.js

---state.js

第一步設計state.js,這裡面確定需要被vuex管理的變數

state.js

import  from '@/common/js/config.js'   //獲取專案的配置---可選


const state=,


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)=>


};
第三步定義如何修改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_playing_state](state,flag),


[types.set_full_screen](state,flag),


[types.set_playlist](state,list),


[types.set_sequence_list](state,list),


[types.set_play_mode](state,mode),


[types.set_current_index](state,index)


};export default mututations;
第五步定義action----mutation通常是每個方法修改單個值，而action通常是每個方法同時修改多個值，action中還會做些異處理---這裡經常是根據業務邏輯寫方法，一般是之後邊開發邊寫，開始的時候不需要定義

action.js

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


export const selectplay=function (,) ;
第六部註冊，所有的檔案定義好了，就可以註冊了

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()
在main,js中

import store from './store'    //本質上是引入index.js


new vue()
使用vuex中的變數

1getter---獲取vuex中的變數並使用

import  from 'vuex';


computed:,
2mutation--修改vuex中的某個值

import  from 'vuex';


methods:,


stopplay(),


...mapmutations( //不能直接修改vuex中的變數,通過對映方法傳引數的方式提交改變vuex中的引數


)},
3action---使用actions.js中的方法改變vuex中的變數

import  from 'vuex'  //action中定義一次改變vuex中多個變數的方法


methods:)


},...mapactions([  //暴露出actions中的方法，作為方法直接呼叫


'selectplay'


])},
簡易版檢視：

DoTween使用（完整版新增）

public float myvalue2 0 public vector3 myvalue2 0 public int myvalue2 0 void start 這個myvalue2可以是任何型別的變數，10和後面的2分別是需要動畫到的值和運動到這個值需要的時間 public recttrans...

Mac環境下svn的使用完整版

本文目錄 在windows環境中，我們一般使用tortoisesvn來搭建svn環境。在mac環境下，由於mac自帶了svn的伺服器端和客戶端功能，所以我們可以在不裝任何第三方軟體的前提下使用svn功能，不過還需做一下簡單的配置。我們首先來看下，如何在mac環境下搭建svn伺服器端環境。回到頂部 回...

mysql完整版 MYSQL安裝（完整版）

一 完全解除安裝mysql yum remove mysql mysql server mysql libs compat mysql51 rm rf var lib mysql rm etc my.cnf 檢視是否還有mysql軟體 rpm qa grep mysql 如果存在的話，繼續刪除即可。...