vuex in vue에 대한 자세한 소개(자세한 설명 및 예제)
- WBOY앞으로
- 2021-12-31 18:26:231861검색
이 기사는 vue의 vuex에 대한 지식을 제공합니다. Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 모델입니다.
Concept
Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.
설치
- HTML의 스크립트 태그를 사용하여
<script src="vue.js"></script> <script src="vuex.js"></script>
- npm을 사용하여 Vue 프로젝트에 다운로드 및 설치(노드 환경이 설치되어야 함)
// 下载 npm install vuex --save // 安装 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
Vuex 아이콘
Vuex 및 단순한 전역 객체는 다음 두 가지 점이 다릅니다:
Vuex의 상태 저장은 반응적입니다. Vue 구성 요소가 저장소에서 상태를 읽을 때 저장소의 상태가 변경되면 해당 구성 요소가 그에 따라 효율적으로 업데이트됩니다.
스토어에서는 상태를 직접 변경할 수 없습니다. 저장소의 상태를 변경하는 유일한 방법은 명시적으로 변형을 커밋하는 것입니다. 이를 통해 모든 상태 변경을 쉽게 추적할 수 있으며 애플리케이션을 더 잘 이해하는 데 도움이 되는 몇 가지 도구를 구현할 수 있습니다.
Store
모든 Vuex 애플리케이션의 핵심은 매장(창고)입니다. "저장소"는 기본적으로 애플리케이션의 대부분의 상태를 포함하는 컨테이너입니다.
State
애플리케이션을 구동하고 모든 구성 요소에 대한 공통 데이터를 저장하는 데 사용되는 데이터 소스입니다.
Getter
getter를 저장소의 계산된 속성으로 생각할 수 있습니다. getter의 반환 값은 종속성에 따라 캐시되며 종속성 값이 변경될 때만 다시 계산됩니다.
Mutation
Mutation 객체는 데이터를 변경하는 콜백 함수를 저장합니다. 함수 이름은 공식적으로 type이라고 합니다. 첫 번째 매개 변수는 state이고 두 번째 매개 변수는 사용자 정의 매개 변수인 payload입니다. mutation은 동기 함수여야 합니다. 돌연변이 개체의 메서드는 상태를 직접 변경하는 대신 store.commit을 사용하여
Action
작업을 호출하여 돌연변이를 제출해야 합니다. 작업에는 모든 비동기 작업이 포함될 수 있습니다. actions 객체의 메서드는 store.dispatch를 사용하여 호출해야 합니다.
액션 함수는 저장소 인스턴스와 동일한 메서드와 속성을 가진 컨텍스트 객체를 허용하므로 context.commit을 호출하여 변형을 제출하거나 context.state 및 context.getters를 통해 상태 및 getter를 얻을 수 있습니다.
Module
단일 상태 트리가 사용되므로 애플리케이션의 모든 상태가 상대적으로 큰 개체에 집중됩니다. 애플리케이션이 매우 복잡해지면 저장소 개체가 상당히 커질 가능성이 있습니다. 위의 문제를 해결하기 위해 Vuex를 사용하면 저장소를 모듈로 분할할 수 있습니다. 각 모듈에는 자체 상태, 변형, 작업, getter 및 중첩된 하위 모듈이 있으며 동일한 방식으로 위에서 아래로 분할됩니다.
HTML에서 vuex 사용
<body><p id="app">
<input type="button" value="+" @click="add">
{{this.$store.state.count}}
<input type="button" value="-" @click="reduce">
{{this.$store.getters.synchro}}
<input type="button" value="改变为10" @click="changeNum"></p><script src="vue.js"></script><script src="vuex.js"></script><script>
var store = new Vuex.Store({
state: {
count: 0
},
getters: {
synchro(state) {
return state.count }
},
mutations: {
increment(state) {
state.count++
},
inreduce(state) {
state.count--
},
inchange(state, num) {
state.count = num }
},
actions: {
change(context, num) {
context.commit('inchange', num)
}
}
})
new Vue({
el: '#app',
store,
methods: {
add() {
this.$store.commit('increment')
},
reduce() {
this.$store.commit('inreduce')
},
changeNum() {
this.$store.dispatch('change', 10)
}
}
})</script></body>
Vue 프로젝트에서 vuex 사용(2가지 유형)
- main.js 파일에 vuex 작성
import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'// 全局状态管理Vue.use(Vuex)Vue.config.productionTip = falsevar store = new Vuex.Store({
state: {
num: 0
},
mutations: {
changeNum(state, num){
state.num += num }
}})new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'})
⎜ 컴포넌트에서 호출
<template>
<p>
<input type="button" value="改变count的值" @click="change">
{{this.$store.state.count}}
<p></template><script>export default {
name: '',
data () {
return {
}
},
methods: {
change() {
this.$store.commit('changeNum', 10)
}
}}</script>
- vuex를 별도로
src 디렉토리에 vuex 디렉토리를 생성하고, 새 모듈 디렉토리와 index.js 파일을 생성하여 vuex 디렉토리에 넣습니다. 
main.js 파일에 vuex 디렉토리를 소개합니다.
import Vue from 'vue'import App from './App'import router from './router'import store from './vuex'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'})
다음 코드를 작성합니다. index.js
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)let modules = {}const requireAllModules = require.context("./", true, /\.js$/)requireAllModules.keys().forEach(key => {
let module = requireAllModules(key).default
if (module && module.name && module.namespaced) {
modules[module.name] = module }})export default new Vuex.Store({
modules: modules,
strict: process.env.NODE_ENV !== "production"}) 다음 코드를 사용하여 모듈 디렉터리에 새 city.js 파일을 만듭니다.
export default {
name: "city",
namespaced: true,
state: {
cityName: '',
cityCode: ''
},
getters: {
getState(state) {
return state },
getCityCode(state) {
return state.cityCode }
},
mutations: {
changeCity(state, cityName) {
state.cityName = cityName }
}}
구성요소에 값을 설정합니다.
<template>
<p>
<ul>
<li v-for="item in city" @click="handChangeCity(item.name)"></li>
</ul>
</p></template><script>import { mapMutations } from 'vuex' // 引入vuexexport default {
name: "city",
data() {
return {
city: [
{ id: 1, name: '北京' }
{ id: 2, name: '上海' }
{ id: 3, name: '广州' }
{ id: 4, name: '深圳' }
{ id: 5, name: '厦门' }
]
}
},
methods: {
// 修改
...mapMutations({
changeCity: "city/changeCity"
}),
// 第一种写法
handChangeCity(cityName) {
this.changeCity(cityName)
}
// 第二种写法 不需要使用 ...mapMutations
handChangeCity(cityName) {
this.$store.commit('city/changeCity', cityName);
}
}}</script>
다른 구성요소에서 사용합니다.
<template>
<p>
<p>{{getState.cityName}}</p>
<p>{{getCityCode}}</p>
</p></template><script>import { mapGetters} from 'vuex' // 引入vuexexport default {
data() {
return {
}
},
computed: {
// 第一种使用方法
...mapGetters({
getState: "city/getState"
})
// 第二种使用方法
...mapGetters('city', ['getState', 'getCityCode'])
}}</script>
도시.
위 내용은 vuex in vue에 대한 자세한 소개(자세한 설명 및 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!