vuejs에서 전역 상태 관리를 구현하는 방법

Vuex는 vuejs에서 전역 상태 관리를 달성하는 데 사용할 수 있습니다. Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 모델로, 형제 구성 요소 간의 통신과 같은 복잡한 애플리케이션의 데이터 상태와 전역 데이터를 관리하는 데 사용할 수 있습니다. . 다층 중첩 구성 요소의 값 전달 등

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuex 전역 상태 관리

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 Vuex 是一个专为Vue.js 应用程序开发的状态管理模式。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。

通俗的来说vuex就是全局数据管理，用来管理全局数据的，vue原本的数据管理只能父子组件之间传递数据，并且不方便，使用vuex可以进行全局数据管理，将所有数据存储到vuex中，使用时调用。

vuex的核心：

• state
• mutations
• actions
• getter

Vuex的用法

安装并使用vuex

安装

1.在项目中进行安装

npm install vuex --save

2.新建一个store.js文件

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
      //存放初始数据
    count: 0
  },
  mutations: {
      //存放修改数据的方法
    increment (state) {
      state.count++
    }
  }
})

使用数据

方法一：使用$store调用

在组件中直接使用this.$store.state调用数据

this.$store.state.数据名

方法二：导入mapState,在组件中将数据展开映射,需要写到计算属性中，使用的时候直接写 count就行

//先导入mapState
import {mapState} from 'vuex'

computed:[
    ...mapState(['count'])
]

在对数据进行操作时，不能直接调用state的数据，如果要修改数据，需要在mutation里写方法，目的就是方便查找哪里除了问题

Mutations的作用与使用方法

mutations里面就是写对数据进行操作的方法的

  mutations: {
//存放修改数据的方法
   add(state) {
     state.count++
   }
 }

使用方式一：

触发mutations函数，使用commit调用里面的方法名

this.$store.commit这是触发mutation的第一种方式

methods:{
   handle(){
       this.$store.commit('add')
   }
}

mutations传参mutation的方法里可以传递两个参数，第一个就是state,第二个是自定义的参数payload

  mutations: {
//存放修改数据的方法
   addN(state，N) {
     state.count+=N
   }
 }

调用是在组件的方法里

methods:{
   handle2(){
       //触发mutation并传参
       this.$store.commit('addN',4)
   }
}

使用方法二

在组件中导入vuex里的mapMutations函数

mapMutations(['sub'])是对里面的方法与store里的方法进行映射

...是展开操作符

import {mapMutations} from 'vuex'

methods:{
   //将方法名写在[]里  ['addN','sub']
   ...mapMutations(['sub'])
   btnhandle(){
       //调用时直接写this.方法名
       this.sub()
       //当传入参数时，直接写这个参数，不需要写state
       this.addN(4)
   }
}

注意:在Mutation函数里不能写异步代码；比如写定时函数，虽然页面会改变，但是实际状态数值不会变。于是就有了actions

Actions的用法

Action用于处理异步任务。

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据.

在store里与mutations同级写一个actions:{ } 在它里面调用mutations的方法，然后在组件中触 发Actions

  mutations: {
  //存放修改数据的方法
    add(state) {
      state.count++
    }
  },
  actions:{
      //context是上下文
      addAsync(context){
          setTimeout(()=>{
              //调用add方法，actions中不能直接修改state中的数据，只有mutation有这个权力
              context.commit('add')
          })
      }
  }

使用actions要在组件中使用dispatch进行触发

btnHandle(){
    //dispatch专门触发action
    this.$store.dispatch('addAsync')
}

actions传递参数

在store的actions里和mutations都要写形参

  mutations: {
  //传参
    addN(state,n) {
      state.count+=n
    }
  },
  actions:{
      //context是上下文
      addAsync(context,n){
          setTimeout(()=>{
              //调用add方法，并传参
              context.commit('addN',n)
          })
      }
  }

在组件中写实参

btnHandle(){
    //dispatch专门触发action,并传入参数
    this.$store.dispatch('addAsync',5)
}

第二种是展开并映射引入mapActions

//引入方法
import {mapActions} from 'vuex

methods:{
    //映射actions
    ...mapActions(['addAsync'])
    btnhandle(){
        //调用对应的actions
        this.addAsync()
    }
}
//也可以不写btnhandle方法了直接将映射的方法名写在点击操作上

注意：在组件中调用actions方法，在actions中使用commit调用mutations方法

getters

• Getter用于对Store中的数据进行加工处理形成新的数据。不会修改原数据
• Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
• Store中数据发生变化，Getter的数据也会跟着变化.

state:{
   count:0
},
getters:{
   showNum(state){
       return '当前最新的数据是:'+state.count
   }
}

第一种调用方式：this.$store.getters.方法名

this.$store.getters.showNum

第二种调用方式：映射展开，在computed中映射

import {mapGetters} from 'vuex'

computed:{
   ...mapGetters(['showNum'])
}

总结

• state是存放初始数据，进行数据初始化的，最好不要在组件里直接调用state
• mutations里面是存储对数据进行操作的方法，但是不能进行异步操作
• actions里面是进行异步操作的方法
• getters상태 관리 패턴
입니다. 형제 구성 요소 간의 통신, 다중 계층 중첩 구성 요소 간의 값 전송 등과 같은 복잡한 응용 프로그램의 데이터 상태를 관리할 수 있습니다.

일반인의 관점에서 vuex는 전역 데이터 관리에 사용되는 전역 데이터 관리입니다. Vue의 원래 데이터 관리는 상위 구성요소와 하위 구성요소 간에만 데이터를 전송할 수 있으며, 전역 데이터를 관리하고 모든 데이터를 In vuex에 저장하는 것은 불편합니다. , 사용될 때 호출됩니다.

vuex의 핵심: 🎜🎜

• state🎜
• mutations🎜
• actions🎜
• getter🎜🎜🎜🎜🎜Vuex 사용법🎜🎜🎜🎜🎜vuex🎜🎜🎜🎜🎜설치🎜🎜🎜🎜1. 프로젝트에 설치🎜rrreee🎜2. 새 스토어 생성 .js 파일🎜rrreee🎜🎜데이터 사용🎜🎜🎜🎜🎜방법 1: $store를 사용하여 호출🎜🎜🎜this.$store.state를 구성 요소에서 직접 사용 call data🎜 rrreee🎜🎜방법 2: 🎜mapState를 가져오고, 구성 요소에서 데이터 매핑을 확장하고, 이를 계산된 속성에 써야 합니다. 사용할 때는 count를 직접 작성하세요.🎜rrreee🎜🎜 데이터에 대한 작업을 수행할 때 상태 데이터를 직접 호출할 수 없습니다. 데이터를 수정하려면 문제가 있는 위치를 더 쉽게 찾을 수 있도록 메서드를 작성해야 합니다🎜🎜🎜🎜Mutations의 역할과 사용🎜 🎜🎜🎜mutations에서는 데이터를 운영하는 방법이 작성됩니다🎜rrreee🎜🎜사용 방법 1: 🎜🎜🎜mutations 함수를 트리거하고 커밋을 사용하여 메소드 이름 inside🎜🎜this.$store.commit 이것은 돌연변이를 유발하는 첫 번째 단계입니다. 단방향🎜rrreee🎜🎜 돌연변이는 돌연변이 메소드에서 두 개의 매개변수를 전달할 수 있습니다. 첫 번째는 상태이고 두 번째는 사용자 정의 매개변수 payload🎜rrreee입니다. 🎜호출은 컴포넌트 메소드에 있습니다🎜rrreee🎜🎜 메소드 2를 사용하세요🎜🎜🎜vuex의 mapMutations 함수를 컴포넌트로 가져옵니다🎜🎜mapMutations(['sub'])는 내부 메소드를 매핑하는 것입니다 그리고 store의 메서드🎜🎜... 예 확장 연산자🎜rrreee🎜🎜참고🎜: 예를 들어 시간 제한 함수를 작성하는 경우 페이지가 변경되더라도 실제 상태는 Mutation 함수에 비동기 코드를 작성할 수 없습니다. 값은 변하지 않습니다. 그래서 액션이 있습니다🎜🎜🎜액션 사용법🎜🎜🎜🎜액션은 비동기 작업을 처리하는 데 사용됩니다. 🎜🎜비동기 작업을 통해 데이터를 변경하는 경우 Mutation 대신 Action을 사용해야 합니다. 그러나 여전히 Mutation in Action을 트리거하여 데이터를 간접적으로 변경해야 합니다. 🎜🎜스토어의 mutation과 동일한 수준에서 작업을 작성합니다. } 내부에서 mutations 메소드를 호출한 다음 컴포넌트에서 Actions를 트리거합니다🎜rrreee🎜🎜액션 사용🎜컴포넌트에서 디스패치를 ​​사용하여🎜rrreee🎜🎜actions pass 매개변수🎜🎜🎜스토어의 액션과 변이에서 다음을 수행해야 합니다. 형식 매개변수 작성🎜 rrreee🎜컴포넌트에 실제 매개변수 작성🎜rrreee🎜🎜두 번째는 확장 및 매핑입니다🎜mapActions 소개🎜rrreee🎜🎜참고🎜: 구성 요소에서 작업 메서드를 호출하고 작업에서 커밋을 사용하여 변형 메서드를 호출합니다. 🎜🎜🎜getters🎜🎜🎜
  • Getter는 Store의 데이터를 처리하여 새로운 데이터를 형성하는 데 사용됩니다. 원본 데이터는 수정되지 않습니다.🎜
  • Getter는 Vue의 계산된 속성과 유사하게 Store의 기존 데이터를 처리하여 새 데이터를 형성할 수 있습니다. 🎜
  • Store의 데이터가 변경되면 Getter의 데이터도 변경됩니다. 🎜🎜rrreee🎜🎜첫 번째 호출 방법🎜: this.$store.getters.Method name🎜rrreee🎜🎜두 번째 호출 방법🎜 : 매핑 확장, Computed🎜rrreee🎜🎜🎜Summary🎜🎜🎜
    • state 매핑은 초기 데이터를 저장하고 데이터를 초기화하는 데 사용됩니다. component🎜
    • mutations에는 데이터 작업을 위한 메서드가 포함되어 있지만 비동기 작업을 수행할 수 없습니다.🎜
    • actions에는 비동기 작업을 수행하는 메서드가 포함되어 있습니다🎜
    • getters는 Store의 데이터를 처리하여 새로운 데이터🎜🎜🎜를 형성하는 데 사용됩니다. 관련 권장 사항: "🎜vue.js tutorial🎜"🎜

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