Vuex 상태 관리를 사용하는 방법

이번에는 Vuex 상태 관리 사용법과 Vuex 상태 관리 사용 시 주의 사항이 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

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

위는 vuex의 공식 문서에 있는 vuex의 소개입니다. 공식 문서에서는 vuex의 사용법을 자세히 설명하고 있습니다. 여기서는 vuex 사용법에 대해 자세히 설명하지 않겠습니다. 이 블로그를 작성하는 목적은 일부 학생들이 vuex를 더 빨리 이해하고 시작하도록 돕는 것입니다.

1.

$ npm install vuex --save

설치 2. main.js 정문 js의 store.js

import Vue from 'vue'
import App from './App'
import router from './router' 
import store from './vuex/store'  //引用store.js
Vue.config.productionTip = false //阻止在启动时生成生产提示 
//vue实例
new Vue({
 el: '#app',
 router,
 store,              //把store挂在到vue的实例下面
 template: '<app></app>',
 components: { App }
})

참조 3. store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //注册Vuex
// 定义常量  如果访问他的话，就叫访问状态对象
const state = {
  count: 1
}
// mutations用来改变store状态, 如果访问他的话，就叫访问触发状态
const mutations = {
  //这里面的方法是用 this.$store.commit('jia') 来触发
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
//暴露到外面，让其他地方的引用
export default new Vuex.Store({
  state,
  mutations
})

에서 Vuex를 참조하세요. 4. Vue 구성 요소에서

사용 $store.commit('jia') 영역을 사용하여 돌연변이 아래의 더하기 및 빼기 방법을 실행하세요

<template>
 <p>
   </p>
<h1 id="Hello-Vuex">Hello Vuex</h1>
   <h5 id="store-state-count">{{$store.state.count}}</h5>
   <p>
    <button>+</button>
    <button>-</button>
   </p>
 
</template>
<!-- 加上scoped是css只在这个组件里面生效，为了不影响全局样式 -->
<style>
  h5{
   font-size: 20px;
   color: red;
  }
</style>

5. 데모를 확인해 보세요

6. 상태는 상태 객체에 액세스합니다

계산을 사용하여 계산

<template>
 <p>
   </p>
<h1 id="Hello-Vuex">Hello Vuex</h1>
   <h5 id="count">{{count}}</h5>
   <p>
    <button>+</button>
    <button>-</button>
   </p>
 
</template>
<script>
import {mapState} from &#39;vuex&#39;
export default{
  name:&#39;hello&#39;, //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用
  // 方法一
  // computed: {
  //  count(){
  //   return this.$store.state.count + 6
  //  }
  // }
  
  // 方法二 需要引入外部 mapState
  computed:mapState({
   count:state => state.count + 10
  })
 
  // ECMA5用法
  // computed:mapState({
  //  count:function(state){
  //   return state.count
  //  }
  // })
  
  //方法三
  // computed: mapState([
  //  &#39;count&#39;
  // ])
 }
</script>

7. 돌연변이 유발 상태(동기화 상태)

<template>
 <p>
   </p>
<h1 id="Hello-Vuex">Hello Vuex</h1>
   <h5 id="count">{{count}}</h5>
   <p>
    <button>+</button>
    <button>-</button>
   </p>
 
</template>
<script>
import {mapState,mapMutations} from &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;, //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用
  //方法三
  computed: mapState([
   &#39;count&#39;
  ]),
  methods:{
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ])
  }
 }
</script>

8. 게터는 속성

을 계산합니다. 게터는 방향을 바꾸는 화살표 기능을 사용할 수 없습니다

store.js에 getters

// 计算
const getters = {
  count(state){
    return state.count + 66
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters
})
//count的参数就是上面定义的state对象
//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。
组件中使用
<script>
 import {mapState,mapMutations,mapGetters} from &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;,
  computed: {
   ...mapState([
    &#39;count&#39;
   ]),
   ...mapGetters([
    &#39;count&#39;
   ])
  },
  methods:{
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ])
  }
 }
</script>

추가 9. actions(비동기 상태)

store.js에 actions

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 定义常量
const state = {
  count: 1
}
// mutations用来改变store状态 同步状态
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
// 计算属性
const getters = {
  count(state){
    return state.count + 66
  }
}
// 异步状态
const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('我先被执行了，然后两秒后调用jian的方法')
  },
  jianplus(context){
    context.commit('jian')
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

추가 구성 요소에

<template>
 <p>
   </p>
<h1 id="Hello-Vuex">Hello Vuex</h1>
   <h5 id="count">{{count}}</h5>
   <p>
    <button>+</button>
    <button>-</button>
   </p>
   <p>
    <button>+plus</button>
    <button>-plus</button>
   </p>
 
</template>
<script>
 import {mapState,mapMutations,mapGetters,mapActions} from &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;,
  computed: {
   ...mapState([
    &#39;count&#39;
   ]),
   ...mapGetters([
    &#39;count&#39;
   ])
  },
  methods:{
   // 这里是数组的方式触发方法
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ]),
   // 换一中方式触发方法 用对象的方式
   ...mapActions({
    jiaplus: &#39;jiaplus&#39;,
    jianplus: &#39;jianplus&#39;
   })
  }
 }
</script>
<style>
  h5{
   font-size: 20px;
   color: red;
  }
</style>

사용 10. 모듈 모듈

상태가 다양하고 관리가 쉬운 대규모 프로젝트에 적합합니다

Store.js 수정

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count: 1
}
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
const getters = {
  count(state){
    return state.count + 66
  }
}
const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('我先被执行了，然后两秒后调用jian的方法')
  },
  jianplus(context){
    context.commit('jian')
  }
}
//module使用模块组的方式 moduleA
const moduleA = {
  state,
  mutations,
  getters,
  actions
}
// 模块B moduleB
const moduleB = {
  state: {
    count:108
  }
}
export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 Vuex 상태 관리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!