이번에는 vuex+Actions 사용에 대한 자세한 설명을 가져오겠습니다. vuex+Actions 사용 시 주의사항은 무엇인가요?
작업은 state를 직접 변경하는 대신 변형을 제출합니다. 작업은 비동기식이고 변형은 동기식입니다.
vuex로 학습하는 예를 따르세요 ---Introduction: 여기에 10을 더하고 1
을 뺍니다. 1. store.js의 코드는 다음과 같습니다:
import Vue from'vue' import Vuex from'vuex' //使用vuex模块 Vue.use(Vuex); //声明静态常量为4 const state = { count : 4 }; const mutations = { add(state,n){ state.count +=n.a; }, sub(state){ state.count--; } }; const actions = { //2种书写方式 addplus(context){//可以理解为代表了整个的context context.commit('add',{a:10}) }, subplus({commit}){ commit('sub'); } }; //导出一个模块 exportdefaultnewVuex.Store({ state, mutations, actions })
2. App.vue에서 코드는 다음과 같습니다.
<template> <p id="app"> <p id="appaaa"> <h1>这是vuex的示例</h1> <p>组件内部count{{count}}</p> <p> <button @click ="addplus">+</button> <button @click ="subplus">-</button> </p> </p> </p> </p> </template> <script> //引入mapGetters import {mapState,mapMutations,mapGetters,mapActions} from'vuex' exportdefault{ name:'app', data(){ return{ } }, computed:{ ...mapState([ "count" ]), }, methods:{ ...mapActions([ "addplus", "subplus" ]) } } </script> <style> </style>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
hammer.js는 모바일 측에서 이미지 제스처 확대 기능을 구현합니다.
위 내용은 vuex+Actions 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!