vuex의 간단한 사용법에 대한 자세한 설명

이 글에서는 주로 vuex의 간단한 사용법을 자세히 소개하고 참고하겠습니다.

1 디렉터리 구성

공식 권장 사항에 따라 src 디렉터리에 저장소 디렉터리 만들기

2 저장소에 파일 만들기

공식에 따라 actions.js, getters.js, index.js, mutations 만들기 추천.js, mutations-types.js, state.js

2.1 state.js

state.js: 하나의 객체에 모든 애플리케이션 수준 상태를 포함하는 vuex의 단일 상태 번호입니다. 지금까지는 "SSOT(단일 데이터 소스)"로 존재합니다. 이는 또한 각 애플리케이션에 하나의 저장소 인스턴스만 포함된다는 의미이기도 합니다. 단일 상태 트리를 사용하면 특정 상태 부분을 직접 찾을 수 있으며 디버깅 중에 전체 현재 애플리케이션 상태의 스냅샷을 쉽게 얻을 수 있습니다. (모든 vuex 상태 데이터를 관리하는 데 사용)

/*
* 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态
* 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
*
*/

const state = {

 // 城市状态，用来管理城市
 city: {},
 cityList: [],
 fullScreen: true,
 palyer: false
};

export default state;

2.2 mutations-types.js mutation과 관련된 문자 상수(일부 상수)에 액세스합니다.

/*
* 存取mutations相关的字符常量
*
*/

// 定义常量并导出
export const SET_CITY = 'SET_CITY';
export const SET_PLAY = 'SET_PLAY';
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
export const SET_CITY_LIST = 'SET_CITY_LIST';

2.3 mutations.js(수정된 연산 정의)

Vuex 스토어 변경 유일한 방법은 복원 상태는 돌연변이를 저지르는 것입니다. Vuex의 돌연변이는 이벤트와 매우 유사합니다. 각 돌연변이에는 문자열 이벤트 유형(유형)과 콜백 함수(핸들러)가 있습니다. 이 콜백 함수는 실제로 상태를 변경하는 곳이며 상태를 첫 번째 매개변수로 받아들입니다

/*
 * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
 * Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
 */

// 导入mutation-type.js里面所有的常量
import * as types from './mutation-types';

// 定义一个mutation可以供设置和修改值
const mutations = {

 /*
 * 1 表达式作为属性表达式放在方括号之内
 * 2 形参state （获取当前状态树的state）
 * 3 形参city，是提交mutation时传的参数
 * 4 使用mutation便于书写方便
 * 5 这个操作相当于往state.js里面写入city
  */
 [types.SET_CITY](state, city) {
  state.city = city;
 },
 [types.SET_CITY_LIST](state, list) {
  state.cityList = list;
 },
 [types.SET_FULL_SCREEN](state, flag) {
  state.fullScreen = flag;
 },
 [types.SET_PLAY](state, palyState) {
  state.palyer = palyState;
 }
};

// 导出mutation
export default mutations;

2.4 getters.js 때때로 저장소의 상태에서 일부 상태를 파생해야 합니다.

mapGetters 보조 함수는 저장소의 getter를 로컬 계산 속성

/*
* 有时候我们需要从 store 中的 state 中派生出一些状态
* 这里的常量主要是对state里面做一些映射
* mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性
*/

// 对state里面的属性做一些映射

export const city = state => state.city;  // 箭头函数的简写
export const cityList = state => state.cityList;
export const fullScreen = state => state.fullScreen;
export const palyer = state => state.palyer;

2.5 actions.js

Action에 매핑하는 것뿐입니다.

1. Action은 상태를 직접 변경하는 대신 변형을 제출한다는 점을 제외하면 mutation과 유사합니다.

2. Action에는 모든 비동기 작업이 포함될 수 있습니다.

3. 한 작업에서 변형을 여러 번 변경하면 작업을 캡슐화할 수 있습니다.

/*
* actions类似mutation
* 区别：
* 1：action提交的是mutation
* 2：action可以包含任意异步操作
*/

/*
 * 使用：
 * 1：在一个动作中多次改变mutation可以封装一个action
 */

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

export const selectList = function ({commit, state}, {list, index}) {
 commit(types.SET_CITY_LIST, list);
 commit(types.SET_PLAY, false);
 commit(types.SET_FULL_SCREEN, true);
};

2.6 index.js 항목

/*
* 入口
*/

import Vue from 'vue';
import Vuex from 'vuex';

// import * as obj from 'xxxx'; 会将xxxx中所有export导出的内容组合成一个对象返回。
import * as actions from './actions';

// 拿到getters里面的映射
import * as getters from './getter';
import state from './state';
import mutations from './mutations';
import createdLogger 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 ? [createdLogger()] : []
});

3

3.1을 사용하여 main.js에 스토어를 등록합니다.

main.js에 새로운 등록 Vue 인스턴스의 저장소

3.2 값을 작성하려면 구성 요소에 mapMutations의 구문을 도입해야 합니다

구문을 소개합니다

import {mapMutations, mapActions} from 'vuex';

메서드에서 mapMutations 보조 함수는 구성 요소의 메서드를 the store.commit call

...mapMutations({
 // 这里和mutation里面的常量做一个映射
 setCity: 'SET_CITY'
})

필요한 곳에 값 쓰기

this.setCity(city);

3.3 값 가져오기

vuex에서 값을 가져오려면 구성 요소에 mapGetters를 도입해야 합니다(mapGetters 보조 함수는 저장소의 getter를 로컬 계산 속성)

mapGetters 소개

import {mapGetters} from 'vuex';

계산 속성에서 객체 확산 연산자를 사용하여 getter를 계산 객체에 혼합합니다.

computed: {
  // 这里面的city映射的是state.js里面的city
  // 可以映射多个值
  ...mapGetters([
   'city',
   'cityList',
   'palyer',
   'fullScreen'
  ])
 }

값 가져오기

created() {
  console.log(this.city);
  console.log(this.cityList[1]);
  console.log(this.palyer);
  console.log(this.fullScreen);
 }

3.4 액션으로 값 저장

...mapActions(['selectList'])

있는 곳에 사용 저장해야해

this.selectList({
 list: this.citys,
 index: 1
});

위 내용은 제가 정리한 내용입니다. 여러분, 앞으로 많은 분들께 도움이 되었으면 좋겠습니다.

관련 기사:

Vue 단일 페이지 애플리케이션이 별도의 스타일 파일을 참조하는 두 가지 방법

js에 키-값 쌍 저장을 기반으로 한 소개 및 주의 사항

angular4 여러 구성 요소에서 서비스 데이터 공유 소통

위 내용은 vuex의 간단한 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!