집 > 기사 > 웹 프론트엔드 > VueX에서 상태 관리자 적용

VueX에서 상태 관리자 적용

不言원래의: 2018-08-04 10:05:031478검색

이 기사는 VueX의 상태 관리자 응용 프로그램을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

VueX State Manager

cnpm i vuex axios -S
1 创建Vuex 仓库
import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new VueX.store({
    state: {//存放状态}，
    mutations:{//唯一修改状态的地方，不在这里做逻辑处理}
})
export default store

2 在入口文件main.js下引入store
import store from './store/index.js'
将store 放到根实例里  以供全局使用
new Vue({
    el:'#app',
    store,
    components:{App},
    template:<App/>
})
开始使用store(以home组件为例)

Vuex의 사용도 점진적입니다. 가장 간단한 것부터 시작하여 레벨에 따라 vuex를 계산하면 경험치와 기술이 증가함에 따라 점차적으로 사용을 늘릴 수 있습니다. 가장 기본적인 t1 수준부터 사용하려면 가장 기본적인 세 가지 버전을 먼저 요약하고, 시간이 나면 나머지도 요약하세요.

T1 level

1.
在hoome/script.js中进行请求数据
import Vue from 'vue'
import axios from 'axios'
export default {
    mounted(){
        axios.get('请求数据的接口')
        .then((res)=>{this.$store.commit('changeList',res.data)})
           //changeList相当于调用了在store.mutations中定义的修改状态的方法
                    //res.data  就是在改变状态时要修改的数据，需要在这传递过去。
        .catch((err)=>{console,log(err)})
        }
    }
2.
在store/index.js中定义
import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new VueX.store({
    state: {
        //存放状态
        list: [ ]     //存放一个空的数组
}，
    mutations:{
        //唯一修改状态的地方，不在这里做逻辑处理
        //定义一个修改list的方法
            //state 指上面存放list的对象，data 为在请求数据出传过来请求到的数据
        changeList (state，data) {
            state.list = data  //将请求来的数据赋值给list
      }
    }
   })
export default store

3.
在home/index.vue中渲染
<template>
    //渲染数据的时候通过this.store.state.list直接从store中取数据
    //还可以从其他组件通过这种方法去用这个数据无需重新获取
    <li v-for=&#39;item of this.store.state.list&#39; :key=&#39;item.id&#39;>{{item.name}}</li>
</template>

참고: 홈 구성 요소에서 얻은 데이터를 다른 구성 요소에서 사용할 수 있지만 페이지를 새로 고칠 때 기본적으로 홈 페이지로 설정되며 이는 데이터 수정과 동일합니다. . 다른 페이지를 클릭하여 데이터에 액세스할 수도 있습니다. 사용자 구성 요소에서 얻은 데이터가 홈 구성 요소에서 사용되는 경우 현재 사용자 구성 요소의 데이터 변경을 트리거할 방법이 없기 때문에 페이지를 새로 고칠 때 데이터가 표시되지 않습니다. 데이터가 비어 있습니다. 사용자 페이지를 클릭하면 데이터가 있을 것입니다. 이때 홈 페이지를 클릭하면 홈 구성 요소의 사용자 구성 요소에서 얻은 데이터를 볼 수 있습니다. 이 문제를 해결하는 방법은 데이터를 로컬에 저장하거나 홈페이지에서 데이터를 요청하는 것입니다

T2 레벨

페이지가 렌더링되면 다음과 같이 this.store.state를 통해 데이터를 가져와야 합니다. 작성 방법이 너무 길고 좋지 않습니다
이 문제를 해결하려면 계산된 속성과 mapState를 결합하여 사용하세요

1
在home/script.js中进行操作
import Vue from 'vue'
import mapState from 'vuex'
import axios from 'axios'
export default {
    computed:{
        //mapState为辅助函数
        ...mapState(['list'])
    },
    mounted(){
        axios.get('请求数据的接口')
        .then((res)=>{this.$store.commit('changeList',res.data)})
        .catch((err)=>{console,log(err)})
        }
    }

2
在home/index.vue中渲染
<template>
    <li v-for=&#39;item of  list&#39; :key=&#39;item.id&#39;>{{item.name}}</li>
</template>

T3 레벨

상수를 사용하여 이벤트 유형을 교체할 수 있습니다(상태 보기 쉽고 유지 관리가 용이함)

    1
    在store下创建mutation-type.js
    export const  CHANGE_LIST = 'CHANGE_LIST'
    
    2
    在store/index.js引入mutation-type.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    import {CHANGE_LIST }  from‘./mutation-type.js’
    vue.use(Vuex)
    const store = new VueX.store({
        state: {
            list: [ ]     //存放一个空的数组
    }，
        mutations:{
        //我们可以使用Es6风格的计算属性命名功能来使用一个常量作为函数名
            [CHANGE_LIST] (state，data) {
                state.list = data  //将请求来的数据赋值给list
          }
        }
       })
    export default store
    
    3
    在home/script.js中进行引入
    import Vue from 'vue'
    import mapState from 'vuex'
    import axios from 'axios'
    import {CHANGE_LIST} from ‘../../store/mutation-type.js’
    export default {
        computed:{
            //mapState为辅助函数
            ...mapState(['list'])
        },
        mounted(){
            axios.get('请求数据的接口')
            .then((res)=>{this.$store.commit(CHANGE_LIST,res.data)})
            .catch((err)=>{console,log(err)})
            }
        }

VueX에서 상태 관리자 적용

관련 기사