vuex가 코딩 + 네임스페이스를 모듈화하는 방법에 대해 이야기해 보겠습니다.

vuex는 코딩 + 네임스페이스를 어떻게 모듈화하나요? 이 글을 간략하게 살펴보겠습니다. 모든 분들께 도움이 되기를 바랍니다!

모듈식 코딩 + 네임스페이스

Little a: "이 기능을 활성화하려는 이유는 무엇입니까?" Shanyu: "물론 코드를 유지하기가 더 쉬워지고 다양한 데이터의 분류가 더 명확해집니다. "

Little a: "그럼 어떻게 모듈식 코딩 + 네임스페이스 를 달성할 수 있습니까?"

Shanyu: "그게 전부입니다."

namespaced: true

모든 것을 Count 컴포넌트와 Person 컴포넌트에 넣으세요. Store 내부

// Count的相关配置
export default {
    namespaced: true,
    actions: {
        // 奇数加法
        jiaodd(context, value) {
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        // 延迟加
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit("JIA", value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value) {
            state.sum += value
        },
        JIAN(state, value) {
            state.sum -= value
        },
    },
    state: {
        sum: 0, // 当前和
        school: '山鱼小学',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

2. 네임스페이스를 연 후 상태 데이터를 읽습니다

  computed: {
     // 自己读取
    personList() {
      returnthis.$store.state.personAbout.personList;
    },
    sum() {
      returnthis.$store.state.countAbout.sum;
    },
  },
  // 借助mapState读取
computed: {
    ...mapState("countAbout", ["sum", "subject", "school"]), 
    ...mapState("personAbout", ["personList"]) 
  },

3. 네임스페이스를 연 후 컴포넌트

  computed: {
      // 自己读取
    firstName() {
      returnthis.$store.getters["personAbout/firstPersonName"];
    }
  },
  methods: {
    // 借助mapGetters读取
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 对象式

    ...mapActions('countAbout',{ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //对象式

  },

4에서 getters 데이터를 읽습니다.

methods: {
     // 直接dispath
    addWang() {
      constpersonObj= { id: nanoid(), name: this.name };
      this.$store.dispatch("personAbout/addNameWang", personObj);
      this.name="";
    },
  },
//借助mapGetters读取:
  computed: {
    ...mapGetters('countAbout',['bigSum'])
  },

5 네임스페이스를 연 후 컴포넌트에서 commit

methods: {
    // 直接调用
    add() {
      constpersonObj= { id: nanoid(), name: this.name };
      this.$store.commit("personAbout/ADD_PERSON", personObj);
      this.name="";
    },
 }
  methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 对象式
      },
  }

를 호출하면 모듈화가 매우 향기롭고 코드가 더 명확하고 데이터가 더 명확하며 나중에 유지 관리가 가능하다고 말할 수 있습니다. 그것도 아주 니우에

(학습 영상 공유 :

vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

위 내용은 vuex가 코딩 + 네임스페이스를 모듈화하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!