Как лучше использовать модуль vuex?

внешний интерфейс
Как лучше использовать модуль vuex?


Введение

Как использовать vuex в проекте? Раньше я писал немодульность, и, может быть, все делали так же, как и я, но я вернулся, посмотрел документацию vue и обнаружил, что vuex лучше использовать модульно, Vue — одностраничное приложение. На самом деле страница всего одна.Тогда домашняя страница или страница списка или страница списка равносильны модулю этой страницы,и его тоже можно понимать как компонент по отдельности.Ведь компонентизация,извлечение компонента , и инкапсуляция компонентов относительно популярны, поэтому при использовании модульного Vuex можно лучше управлять соответствующими модулями, что очень хорошо для разделения и позиционирования данных. Там много ерунды, давайте сначала фотку скинем.

Демонстрационное подключение:GitHub.com/cookie-station…


Коммуникация по-прежнему громоздка, поэтому родился vuex.

2. Что такое векс?

Кто-то говорит, что это плагин, кто-то говорит, что это репозиторий. Легче понять, что сказал чиновник, Vuex — это специально разработанный для приложений Vue.jsрежим управления состоянием. Он использует централизованное хранилище для управления состоянием всех компонентов приложения и использует соответствующие правила, чтобы гарантировать предсказуемое изменение состояния. По сути, это управление данными для Vue, чтобы лучше хранить данные и реагировать на данные.

3. Когда лучше всего использовать vuex?

Цитируя официальный язык: Vuex помогает нам управлять общим состоянием и поставляется с большим количеством концепций и фреймворков. Это требует компромисса между краткосрочными и долгосрочными выгодами. Использование Vuex может быть утомительным и избыточным, если вы не планируете разрабатывать большие одностраничные приложения. Это правда — если ваше приложение достаточно простое, вам лучше не использовать Vuex. Простого шаблона хранилища будет достаточно, но если вам нужно создать большое одностраничное приложение, вы, вероятно, подумаете, как лучше управлять состоянием вне компонентов, и Vuex будет естественным выбором.

4. Принцип поясняется картинкой


Четыре основных модуля:

  1. состояние: перевод: состояние, состояние на самом деле является объектом управления состоянием данных, где вы можете инициализировать некоторые данные, которые вы хотите.
  2. геттер: перевод: геттер, геттер — это чтение объекта данных состояния,Геттеры означают получение с поверхности, что можно рассматривать как своего рода повторное редактирование перед получением данных, что эквивалентно фильтрации и обработке данных.. Геттеры похожи на вычисляемые свойства, возвращаемое геттером значение кэшируется в соответствии с его зависимостями и пересчитывается только при изменении его зависимостей.
  3. Действия: Перевод: Действие. В Действиях мы можем определить метод, который мы хотим выполнить асинхронно. Здесь он будет выполняться не сразу, а для отправки метода на страницу и отправки мутаций вместо непосредственного изменения состояния на странице. Существует два способа распространения, первый this.$store.dispatch('xxx')Второй можно использоватьmapActionsВспомогательная функция сопоставляет методы компонента сstore.dispatchВызов (отражено в демо)
  4. мутации:translation:Mutation, в мутациях много методов изменения состояния, то есть как и перевод, можно менять данные в состоянии, попробуйте рассказать о единственном способе изменения данных в состоянии.

5. Перейти к демонстрации

Я не буду рассказывать про проект инициализации, просто сгенерирую его шаг за шагом согласно документу.

  • Структура каталога:


отображение страницы



модульные данные

Сначала создайте папку модуля в магазине и создайте homeDataStore.js и listDataStore.js соответственно.Эти два модуля хранят данные соответствующих страниц соответственно.На приведенной выше странице видно, что я записал данные только на странице списка, поэтому мы ставим Страница списка используется в качестве примера.

отображение кода listDataStore.js

import axios from 'axios'
const listData = {
    namespaced:true,//注意 模块化管理数据请不要忘了命名空间的开启
    state:{
       List:[],
       count: 0,
       compoentData:[],
       number: 0

    },
    actions:{
        getListData(context){
            new Promise((resolve,reject)=>{
                axios.get('../../../static/listData.json').then((res)=>{
                    context.commit('ListData',{'listDatas': res.data.listData})
                })
            })
        },
        handleAdd(context){
            context.commit("handleAddState")
        }
    
    },
    mutations:{
        ListData(state, paylod){
            state.List = paylod.listDatas
        },
        handleAddState(state){
            state.number++;
        }
    },
    getters: {
        List: state => state.List,
        count: state => state.count,
        number: state => state.number
    }
}
export default listData;

Формат данных тот же, и каждая страница состоит из этих четырех основных модулей.

Отображается файл index.js в папке магазина.

//这个是总的store，抛出各个模块的store
import Vue from 'vue'
import Vuex from 'vuex'
import homeData from './moudel/homeDataStore'
import listData from './moudel/listDataStore'
Vue.use(Vuex)
const store = new Vuex.Store({    
modules:{ 
       homeData,
        listData,
    }})export default store;

Сюда импортируются данные каждого модуля.

отображение файла main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from  './store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ 
 el: '#app',  
router,  
store,  
render: h => h(App)
})

Внедрите хранилище и зарегистрируйте хранилище на экземпляре vue, чтобы базовый формат данных соответствующего модуля был таким.Далее давайте посмотрим, как его вызвать на странице.

На странице используются данные магазина. Отображение страницы списка.

<template>
 <div> 
<router-link to='/'> 首页home</router-link><br/>
这是列表页list<br/>
<ul> 
<li v-for="item in List" v-bind:key="item.id">{{item.item}}</li> 
</ul>       
 <div>计算：</div>
        <div>{{number}}</div>
        <button @click='handleAdd()'>add</button> 
   </div></template><script>
import { mapGetters, mapActions } from 'vuex'
export default {    
name: 'list',
data(){        
return{}    
},    
computed:{        
    ...mapGetters('listData',['List','number'])    
},    
methods:{        
  //方法一：  ...mapActions('listData',['getListData','handleAdd']),       
   //方法二：       
   ...mapActions({            
     getListData:"listData/getListData",            
     handleAdd:"listData/handleAdd"        
})    
},    
mounted(){        
   this.getListData();    
}}
</script>
<style></style>

Введите вспомогательную функцию import { mapGetters, mapActions } from 'vuex' и в вычисляемом свойстве получите данные соответствующей страницы, то есть хранилище страницы списка, соответствующей странице списка, чтобы получить номер списка. Данные сопоставляются со страницей, чтобы получить данные ответа. Методы — это методы, сопоставленные со страницей. Например, метод getListData — это данные, запрашиваемые интерфейсом. Когда страница загружается, он вызывается, то есть он смонтирован. Также диспетчеризируется метод handleAdd, что видно по соответствующим действиям. Если вы не используете вспомогательные функции, то также будет использована диспетчеризация, которая здесь подробно не обсуждается.

демонстрационный адрес:GitHub.com/cookie-station…

Шесть резюме

Приведенное выше описание простое и понятное.Вы можете напрямую использовать этот модульный метод управления данными в проекте.В общем, вы можете лучше понять блок-схему vux.Односторонний поток данных может сформировать идеальный замкнутый цикл. У меня нет большого литературного таланта, я просто хочу описать свое понимание простым и понятным языком в последнее время.Если я могу вам немного помочь, пожалуйста, поставьте мне небольшой лайк ⊙_⊙!


Категории