Vuex는 vuejs에서 전역 상태 관리를 달성하는 데 사용할 수 있습니다. Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 모델로, 형제 구성 요소 간의 통신과 같은 복잡한 애플리케이션의 데이터 상태와 전역 데이터를 관리하는 데 사용할 수 있습니다. . 다층 중첩 구성 요소의 값 전달 등
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
Vuex
는 Vue.js
애플리케이션용으로 특별히 개발된 Vuex
是一个专为Vue.js
应用程序开发的状态管理模式。可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。
通俗的来说vuex就是全局数据管理,用来管理全局数据的,vue原本的数据管理只能父子组件之间传递数据,并且不方便,使用vuex可以进行全局数据管理,将所有数据存储到vuex中,使用时调用。
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
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
是存放初始数据,进行数据初始化的,最好不要在组件里直接调用statemutations
里面是存储对数据进行操作的方法,但是不能进行异步操作actions
里面是进行异步操作的方法getters
상태 관리 패턴일반인의 관점에서 vuex는 전역 데이터 관리에 사용되는 전역 데이터 관리입니다. Vue의 원래 데이터 관리는 상위 구성요소와 하위 구성요소 간에만 데이터를 전송할 수 있으며, 전역 데이터를 관리하고 모든 데이터를 In vuex에 저장하는 것은 불편합니다. , 사용될 때 호출됩니다.
vuex의 핵심: 🎜🎜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🎜🎜🎜state
매핑은 초기 데이터를 저장하고 데이터를 초기화하는 데 사용됩니다. component🎜 mutations
에는 데이터 작업을 위한 메서드가 포함되어 있지만 비동기 작업을 수행할 수 없습니다.🎜actions
에는 비동기 작업을 수행하는 메서드가 포함되어 있습니다🎜위 내용은 vuejs에서 전역 상태 관리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!