Vue에서 파일을 사용하는 방법-JS 튜토리얼-php.cn

Vue에서 파일을 사용하는 방법

亚连

풀어 주다： 2018-06-12 16:29:12

원래의

1604명이 탐색했습니다.

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴입니다. 이번 글에서는 주로 웹 프론트엔드 Vue를 소개합니다: Vuex를 단일 파일로 활용하는 방법 필요한 친구들이 참고할 수 있습니다

Vuex란 무엇인가요?

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴입니다. 중앙 집중식 스토리지를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다. Vuex는 Vue의 공식 디버깅 도구 devtools 확장에도 통합되어 제로 구성 시간 이동 디버깅, 상태 스냅샷 가져오기 및 내보내기 등과 같은 고급 디버깅 기능을 제공합니다.

지난번에는 vuex의 기본 사용법과 어떤 상황에서 사용되는지 설명하기 위해 덧셈과 뺄셈의 예를 사용했습니다. 지난번에 이 예제를 컴포넌트로 간략하게 보여드렸는데, 이번에는 전체 프로젝트의 상태를 통일적으로 관리하기 위해 vuex를 별도의 파일로 추출해봤습니다.

저번에 말했듯이, 프로젝트 규모가 충분히 크면 vuex를 사용하여 전체 프로젝트의 상태를 관리하는 것이 가장 좋습니다. 소규모 프로젝트인 경우 모든 사람이 사용하는 것은 권장되지 않습니다. 자, 더 이상 고민하지 말고 코드는 다음과 같습니다.

프로젝트를 위한 모든 것을 준비하고 vue-cli, webpack, vuex, 라우터 등을 설치한 후

첫 번째 단계는 store.js라는 새 파일을 만드는 것입니다.

import Vue from &#39;vue&#39; //引入vue
import Vuex from &#39;vuex&#39; // 引入vuex
Vue.use(Vuex)  // 注册vuex
export default new Vuex.Store({ // 暴露与new vuex
 state: { // 相当于vue里data 存放整个项目的各个状态
  number: 0 
 }，
 mutations: { //相当于vue里的methods放方法的，定义一些可以用来调用和修改state里的状态值
   addFun (state,num) { 
    state.number = num
   }
 }
})

로그인 후 복사

이 상태 관리 파일이 생성되었으며 다음 단계는 이를 호출하는 방법입니다.

<template>
 {{numbertxt}}
 <button @click="addfun(1)">按钮1</button>
 <button @click="addfun(2)">按钮2</button>
</template> 
<script>
import store from &#39;store.js&#39; // 老样先要引入
 export default{
  store:store, // 定义
  computed: { //实时监听
    numbertxt () { // 实时监听在store.js里的值改变
     return store.state.number
    }
   },
  methods:{
   addfun(num){
    store.commit(&#39;addFun&#39;,num) 
    //显式的提交 (commit) mutation里的方法来改变值
   }
  }
｝
</script>

로그인 후 복사

이제 vuex의 독립적 추출에 대한 좀 더 복잡한 예가 이해되지 않거나 마음에 들지 않는 분들을 위해 설명합니다. vue WeChat(nihaomeili87)에 저를 추가하시면 함께 발전하겠습니다!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.