Vue 공식: 상태 관리 도구
여러 구성 요소 간에 공유되어야 하며 반응형, 단일 변경, 모든 변경이 가능한 상태입니다.
예를 들어 전역적으로 사용되는 일부 상태 정보: 사용자 로그인 상태, 사용자 이름, 지리적 위치 정보, 장바구니 항목 등
이 시점에서 전역 상태 관리를 위한 도구가 필요합니다. Vuex는 다음과 같습니다. 도구.
View–>Actions—>State
뷰 레이어(view)는 액션(action)을 트리거하여 상태(state)를 변경하고 다시 뷰 레이어(view)에 응답합니다
store/index.js는 스토어 객체를 생성하고 스토어를 내보냅니다.
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})main.js는
... import store from './store' ... app.use(store)
vue2에서는 this.$store.xxx를 통해 스토어의 인스턴스 객체를 가져올 수 있습니다.
vue3의 설정은 beforecreate 및 생성 전에 실행됩니다. 이때 vue 객체는 아직 생성되지 않았고 이전 this도 없으므로 여기서는 store 객체를 얻기 위해 다른 방법을 사용해야 합니다.
import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore() // 该方法用于返回store 实例
console.log(store) // store 实例对象데이터를 저장하는 곳
state: {
count: 100,
num: 10
},사용 방법은 vue2.x 버전과 거의 동일합니다. $store.state.property 이름을 통해 해당 state의 속성을 가져옵니다.
//template中
<span>{{$store.state.count}}</span>
<span>{{$store.state.num}}</span>상태에서 데이터 변경을 직접 수행할 수 있지만 Vue에서는 이를 권장하지 않습니다. Vue 개발 도구 devtools의 경우 상태에서 직접 데이터 변경이 이루어지면 devtools가 이를 추적할 수 없습니다. vuex에서는 데이터 변경이 액션(비동기 작업)이나 변이(동기 작업)를 통해 수행될 수 있어 데이터 변경 사항을 devtools에서 직접 관찰하고 기록할 수 있어 개발자가 보다 쉽게 디버깅할 수 있기를 기대합니다.
또한 vue3의 상태에서 속성을 추가하거나 객체를 삭제할 때 더 이상 객체의 반응형 처리를 수행하기 위해 vue.set() 또는 vue.delete()를 사용할 필요가 없습니다. 이미 반응형입니다.
vuex: mutations 제출
동기화 작업은 mutations에서 직접 수행할 수 있습니다.
mutation은 주로 2가지 부분으로 구성됩니다.
String 이벤트 유형(유형)
A **콜백 함수(핸들러)** 콜백 함수의 첫 번째 매개변수는 state
mutations: {
// 传入 state
increment (state) {
state.count++
}
}입니다. 템플릿의 $store.commit('메서드 이름')에 의해 트리거됩니다.
vue3.x에서 필수입니다. ** store 인스턴스에서는 useStore **와 같은 함수를 호출하고
// 导入 useStore 函数
import { useStore } from 'vuex'
const store = useStore()
store.commit('increment')mution의 매개변수 및 매개변수 전송 메소드를 vuex로 가져와야 합니다. 수신된 매개변수는 정의된 메소드에 직접 작성하여 승인할 수 있습니다.
// ...state定义count
mutations: {
sum (state, num) {
state.count += num
}
}<h3>{{this.$store.state.count}}</h3>
<button @click="add(10)">++</button>
...
<script setup>
// 获取store实例，获取方式看上边获取store实例方法
const add = (num) => {
store.commit('sum', num)
}
</script>mution의 제출 스타일
에 매개변수를 추가하여 전달합니다. 앞에서 언급한 것처럼 Mutation은 주로 유형과 콜백 함수, 그리고 커밋 페이로드를 통한 매개변수 전송(제출)으로 구성됩니다. 이제
이 방법으로 mutation을 제출할 수 있습니다const add = (num) => {
store.commit({
type: 'sum', // 类型就是mution中定义的方法名称
num
})
}
...
mutations: {
sum (state, payload) {
state.count += payload.num
}
}...
mutations: {
sum (state, num) {
state.count += num
}
},
actions: {
// context 上下文对象，可以理解为store
sum_actions (context, num) {
setTimeout(() => {
context.commit('sum', num) // 通过context去触发mutions中的sum
}, 1000)
}
},// ...template store.dispatch('sum_actions', num)
// ...
const addAction = (num) => {
store.dispatch('sum_actions', {
num
}).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
} actions: {
sum_actions (context, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 通过 context 上下文对象拿到 count
if (context.state.count < 30) {
context.commit('sum', payload.num)
resolve('异步操作执行成功')
} else {
reject(new Error('异步操作执行错误'))
}
}, 1000)
})
}
},import { createStore } from 'vuex'
export default createStore({
state: {
students: [{ name: 'mjy', age: '18'}, { name: 'cjy', age: '22'}, { name: 'ajy', age: '21'}]
},
getters: {
more20stu (state) { return state.students.filter(item => item.age >= 20)}
}
})//...template
<h3>{{$store.getters.more20stu}}</h3> // 展示出小于20岁的学生getters: {
more20stu (state, getters) { return getters.more20stu.length}
}를 사용하여
getters: {
more20stu (state, getters) { return getters.more20stu.length},
moreAgestu (state) {
return function (Age) {
return state.students.filter(item =>
item.age >= Age
)
}
}
// 该写法与上边写法相同但更简洁，用到了ES6中的箭头函数，如想了解es6箭头函数的写法
// 可以看这篇文章 https://blog.csdn.net/qq_45934504/article/details/123405813?spm=1001.2014.3001.5501
moreAgestu_Es6: state => {
return Age => {
return state.students.filter(item => item.age >= Age)
}
}
}store/modules/user.js 处理用户相关功能
store/modules/pay.js 处理支付相关功能
store/modules/cat.js 处理购物车相关功能
// user.js模块
// 导出
export default {
namespaced: true, // 为每个模块添加一个前缀名，保证模块命明不冲突
state: () => {},
mutations: {},
actions: {}
}最终通过 store/index.js 中进行引入
// store/index.js
import { createStore } from 'vuex'
import user from './modules/user.js'
import user from './modules/pay.js'
import user from './modules/cat.js'
export default createStore({
modules: {
user,
pay,
cat
}
})在template中模块中的写法和无模块的写法大同小异，带上模块的名称即可
<h3>{{$store.state.user.count}}</h3>store.commit('user/sum', num) // 参数带上模块名称 store.dispatch('user/sum_actions', sum)
위 내용은 Vue3에서 Vuex를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
