이 기사에서는 vuejs의 플러그인 상태 관리 구현에 대해 설명합니다. vuejs의 플러그인 상태 관리 구현에 대해 모르거나 vuejs의 플러그인 상태 관리 구현에 관심이 있는 경우 이 기사를 함께 살펴보세요. 더 이상 고민하지 말고 본론으로 들어가겠습니다
초보자들이 vuex를 처음 접했을 때 vuex가 매우 강력하고 사용하기 쉽다는 말만 들었을 뿐입니다. 다양한 nb 작업을 수행했지만 일단 이해하려고 하면 무력해 보였습니다. 나도 마찬가지다. 처음 접했을 때는 문서와 영상을 읽었지만 결국에는 옆으로 치워두었다. 시간이 지나 다시 생각해 보니 새로운 지식과 이해가 생겼습니다.
먼저 Vuex를 완전히 마스터하고 싶다면 다음 질문을 파악해야 합니다.
1 vuex가 무엇인가요?
2 .어떤 상황에서 vuex를 사용해야 하는지(즉, 어떤 종류의 문제를 vuex로 해결할 수 있는지), 어떤 상황에서 vuex를 사용하는 것이 적합한가요?
이 두 가지를 살펴보겠습니다. 질문 먼저:
vuex가 무엇인가요? 공식 웹사이트에 나와 있는 내용: Vuex
Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴입니다. 내 대중적인 이해에 따르면 vuex는 다양한 구성 요소 간의 일부 상태를 관리하는 데 사용됩니다. 이러한 상태는 공개(공유) 부분이라는 것을 이해할 수 있습니다. 이때 모든 구성 요소는 상태를 얻거나 일부 동작 이벤트를 트리거할 수 있습니다.
언제 vuex를 사용해야 합니까? 공식 웹사이트에서는 다음과 같이 말합니다. 대규모 단일 페이지 애플리케이션을 개발할 계획이 없다면 다음을 사용하세요.
Vuex는 번거롭고 중복될 수 있습니다. 사실입니다. 앱이 충분히 단순하다면 Vuex를 사용하지 않는 것이 좋습니다. 간단한 글로벌 이벤트 버스면 충분합니다. 그러나 중대형 단일 페이지 애플리케이션을 구축해야 하는 경우 구성 요소 외부의 상태를 더 잘 관리하는 방법인 Vuex를 고려할 가능성이 높습니다.
자연스러운 선택이 될 것입니다.
그럼 이제 상대적으로 큰 프로젝트를 개발 중이라고 가정하겠습니다. vuex는 어디에 사용될까요? 애플리케이션의 복잡성이 증가함에 따라 구성 요소 간에 점점 더 많은 데이터 또는 구성 요소 상태가 전송됩니다. 예를 들어 구성 요소 A가 구성 요소 B에 들어갈 때(페이지 A가 페이지 B에 들어갈 때) 일부 매개변수를 가져와야 하는 경우가 많습니다. 이때 매개변수를 url 뒤에 넣어서 매개변수로 전달할 수도 있습니다. 매개변수를 쉽게 노출시키고 싶지 않다면 먼저 세션이나 localstorage에 저장했다가 들어갈 때 꺼내도 됩니다. 두 번째 페이지. 예, 이것은 실제로 해결 방법이며 많이 사용됩니다. 하지만 이는 좋은 방법이 아닙니다. 이때 vuex가 도움을 주어야 합니다. 또한, vuex에 대한 기본적인 이해가 있으면 vuex 관리가 모듈식 사고를 기반으로 하므로 향후 프로젝트 관리 및 유지 관리에 매우 친화적이라는 것을 알게 될 것입니다.
이제 vuex의 핵심 개념을 더 깊이 이해해야 합니다. 다음은 제가 개인적으로 이해하고 있는 개념입니다. 우선 Vuex2.0 공식문서 개념을 먼저 읽어보시길 권합니다.
Vuex
Store in의 템플릿 정의는 다음과 같습니다.
1 및 state 은 초기화 데이터(상태)가 vuex에 배치되는 애플리케이션의 데이터 구조를 정의합니다. 데이터를 저장하는 데 사용되는 구성 요소의 데이터와 동일합니다.
state:{
todoLists:[],
},로그인 후 복사
2, getters은 상태에 있는 총 todoList 수를 가져오는 등 상태에서 상태를 파생시키는 것입니다. 실제로 getter가 vuex에 배치된다는 점을 제외하면 vue의 계산 속성과 동일합니다.
//Getters函数 接受 state 作为其第一个参数
getters:{
todoCount(state){
return state.todoLists.length;
}
},로그인 후 복사
3, mutations 은 앱 상태 업데이트가 허용되는 유일한 곳입니다. vue의 $on 이벤트와 유사합니다.
각 돌연변이에는 문자열 이벤트 유형(유형)과 콜백 함수(핸들러)가 있습니다. 참고: 돌연변이는 동기 함수여야 합니다.
//和Getters函数一样 接受 state 作为其第一个参数
mutations:{
//新増 TodoList item
ONADDTODO(state,item){
state.aTodos.push(item);
},
//删除 TodoList item
ONDELTODO(state,index){
state.aTodos.splice(index,1);
},
//设置 错误提示信息
ONERROR(state,str){
state.massage=str;
}
},로그인 후 복사
4, actions 제출에 의해 트리거되는 변경 정보에 대한 설명을 정의합니다. 모든 비동기 작업은 작업에서 수행할 수 있습니다, 일반적인 예는 서버 데이터 수집이 완료되면 store.commit()(vue의 $emit와 유사)가 호출되어 변경 사항을 호출합니다.
스토어의 상태. 구성 요소에서 디스패치를 사용하여 작업을 실행할 수 있습니다.
//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
因此你可以调用 context.commit 提交一个 mutation，
或者通过 context.state 和 context.getters 来获取 state 和 getters
actions:{
//提交 ONADDTODO
onAddTodo(context,item){
if(item.value!=""){
context.commit("ONADDTODO",item);
context.commit("ONERROR","");
}else{
context.commit("ONERROR","添加失败")
}
},
//提交 ONDELTODO
//可利用 ES2015 的 [参数解构] 来简化代码
onDelTodo({commit},index){
//commit=context.commit
commit("ONDELTODO",index);
}
}로그인 후 복사
Vuex 도우미 함수
1, Vuex.mapState(map: Array | Object): Object
Vuex에서 상태를 반환하는 구성 요소의 계산된 속성을 만듭니다. 가게.
2.Vuex.mapGetters(map: Array | Object): Object
생성된 구성 요소의 계산된 속성은 getter의 반환 값을 반환합니다.
3.Vuex.mapActions(map: Array | Object): Object
액션을 배포하는 구성 요소 메서드를 만듭니다.
4. Vuex.mapMutations(map: Array | Object): Object
Mutation을 제출하는 컴포넌트 메소드를 생성합니다.
Vuex 보조 기능의 구체적인 사용법은 다음을 참조하세요: API 문서
TodoList 예시
Vuex의 기본 개념을 이해한 후, 전체 사용 과정.
vue-cli 도구 를 사용하여 프로젝트 디렉터리를 생성하고 vuex를 설치
vue init webpack-simple vue-vuex-todolist
npm install
npm install vuex --save
npm run dev //启动项目
로그인 후 복사
src 디렉터리 아래에 store라는 디렉터리를 생성하여 상태 관리 관련 코드를 저장합니다. 먼저 인덱스를 생성합니다. Node.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
massage:"",
aTodos:[{value:"默认默认",id:0}],
},
getters:{
nCounts(state){
return state.aTodos.length;
}
},
mutations:{
//新増 TodoList item
ONADDTODO(state,item){
state.aTodos.push(item);
},
//删除 TodoList item
ONDELTODO(state,index){
state.aTodos.splice(index,1);
},
//设置 错误提示信息
ONERROR(state,str){
state.massage=str;
}
},
actions:{
//提交 ONADDTODO
onAddTodo(context,item){
if(item.value!=""){
context.commit("ONADDTODO",item);
context.commit("ONERROR","");
}else{
context.commit("ONERROR","添加失败")
}
},
//提交 ONDELTODO
onDelTodo({commit},index){
commit("ONDELTODO",index);
}
},
modules:{}
});
export default store;로그인 후 복사
main.js 파일의 구성된 Vue 인스턴스에 Store 인스턴스를 추가합니다.
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
el: '#app',
store,
render: h => h(App)
})로그인 후 복사
src 디렉토리 아래에 Components라는 디렉토리를 생성하여 vue 구성 요소를 저장하고 생성합니다. 입력.vue, list.vue 파일
input.vue
<template>
<p class="form-group ">
<input type="text" class="form-control" placeholder="" v-model="value" />
<button type="buttom" class="btn btn-default" @click="addItem">Add Item</button>
</p>
</template>
<script>
export default{
data(){
return {
value:"",
id:0
}
},
methods:{
addItem(){
let item={value:this.value,id:++this.id};
this.value="";
this.$store.dispatch("onAddTodo",item);
}
}
}
</script>
<style lang="scss">
%box{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
.form-group{@extend %box;
.form-control{-webkit-box-flex:1;}
}
</style>로그인 후 복사
list.vue
<template>
<p class="todolist">
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in aTodos" >
<span>{{item.value}}</span>
<button class="btn btn-default" @click="delItem(index)">删除</button>
</li>
</ul>
</p>
</template>
<script>
import {mapState} from "vuex";
export default{
data(){
return {}
},
methods:{
delItem(index){
this.$store.dispatch('onDelTodo',index);
}
},
computed:{
...mapState([
'aTodos'
])
}
}
</script>
<style lang="scss">
%box{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
.list-group-item{display: -webkit-box;-webkit-box-align:center;
span{
display: block;
-webkit-box-flex:1;
}
}
</style>로그인 후 복사
修改App.vue文件
<template>
<p id="app">
<h1>Vue.js Vue TodoList</h1>
<hr>
<todoInput />
<todoList />
<p>todoList 数量：{{todoCount}}</p>
<pre class="brush:php;toolbar:false">{{$store.state}}
<script>
import todoInput from './components/input.vue';
import todoList from './components/list.vue';
import {mapGetters} from "vuex";
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed:{
...mapGetters({
todoCount:"nCounts"
})
},
components:{
todoInput,
todoList
}
}
</script>
로그인 후 복사
index.html添加bootstrap.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-vuex-demo</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<p id="app"></p>
<script src="/dist/build.js"></script>
</body>
</html>로그인 후 복사
以上就是本篇文章的所有内容，大家要是还不太了解的话，可以自己多实现两边就很容易掌握了哦！
相关推荐：
Vuejs搜索匹配功能实例详解
Vuejs2.0子组件调用父组件的方法
위 내용은 vuejs에 구현된 플러그인 상태 관리에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
