Научит вас, как использовать vuex в vue-cli, и познакомится с vuex.

Командная строка JavaScript Vue.js Vuex

Пишите впереди:

Эта статья представляет собой минималистскую демонстрацию использования vuex в vue-cli с кратким введением в vuex. Друзья в беде могут сделать ссылку, если вам нравится, вы можете поставить лайк или обратить внимание, я надеюсь, что это может помочь всем.

Эта статья была впервые опубликована в моем личном блоге:obkoro1.com

Знакомство с шагами

Я создал новый vue-cli, в котором не было ничего, кроме vuex, вот онАдрес облака кода, можно скачать, тоnpm install,npm run devПопробуйте, все места, где используется vuex, также аннотированы.

Установить

    npm install vuex --save

Создайте папку vuex в каталоге src

文件夹包含文件

Эта папка содержит вышеперечисленные файлы.После того, как она будет создана, мы можем поговорить о том, что в ней по порядку.

vuex/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import status from './modules/status/index';//引进模块
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {  
    //Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action
    dataStatus:status,//访问这里面数据的时候要使用'dataStatus'
  },
});

Это основное хранилище файлов vuex. В этом примере состояние, мутация и действие разделены на модули, а затем каждый модуль ссылается на файл index.js. После того, как файлы во всей нашей папке настроены, нам нужно Внести файл в main.js,

vuex/modules/status/index.js

import actions from './actions';
import mutations from './mutations';
//引入action和mutations 

export default {  
  state:{ //这里面是要读取或者写入数据的地方
      msg:'默认状态',
  },
  //state actions mutations顺序不能乱
  actions: actions,
  mutations: mutations,
}

Это основной файл в модуле, модуль имеет свое состояние, действия и мутации, которые разделены сверху вниз.

vuex/modules/status/mutation_type.js

//这个js文件里面只是一些变量，把action和mutation文件里面相同变量名的链接起来
export const VUEX_TEST = 'VUEX_TEST';
// 一般使用的是大写来命名变量，因为尤大也是这么做 2333

vuex/modules/status/actions.js

import * as types from './mutation_type'; //引入变量
export default {
  actionFn({commit},data){ //actionFn是在组件通过dispatch触发的函数名 可以理解成组件和actions的连接
    commit(types.VUEX_TEST,data);
    //types.VUEX_TEST 是要commit到mutation的哪个位置 变量的作用
    //data 是传过来的参数
  }
};

vuex/modules/status/mutations.js

import * as types from './mutation_type';//引入变量

export default {
  //types.VUEX_TEST 代表接受哪个actions的commit 也就是上面引入变量的作用
  [types.VUEX_TEST](state,data){ 
    //第一个参数state是这个模块的state 第二个参数是传进来的数据 
    if(data.status==1){ //根据传进来的参数做各种操作
      //这里就是操作state了，赋值之后，各个组件上面引用该数据的地方会自动更新      
      state.msg=data.text;
    }else if(data.status==2){
        state.msg='奕迅';
    }
    //这里是随便写的一个栗子
    console.log(state.mg,data,'mutation'); 
  }
};

В этих двух файлах есть комментарии, и объяснение вполне понятное. После того, как все файлы будут созданы, вернитесь и посмотрите, что между каждым файлом есть связь, подумайте об этом, может быть, вы что-то поймете эммм

папка vuex, каталог файлов и скачать

импортировать main.js

Папка vuex выше предназначена только для создания хранилища, но этого недостаточно, нам также нужно использовать это в проекте. Ссылка на main.js, как показано.

Как использовать в компонентах.

Если вы используете его, вы можете использовать его, как описано выше.Эта статья является просто примером.Есть более сложные операции.После того, как вы начнете, вы можете изучить его медленно.

git-адрес

Я чувствую, что текст довольно беспорядочный. Если вы не очень хорошо понимаете, вы можете перейти кОблако кодаСкачал файл, а потом пробежался сам, посмотри еще, попробуй, проблем быть не должно.

Введение в векс

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

vuex в основном используется дляКомпонентные возможности связи между сложными проектами, Не используйте этот сложный механизм управления событиями и состояниями для простых проектов. Если проект недостаточно сложен, рекомендую то, что писал ранее:Как определить глобальные переменные и глобальные функции в проекте vue, требования также могут быть достигнуты в виде глобальных переменных.

Роль реализации vuex: механизм обмена данными

Данные о состоянии хранятся в едином хранилище центра обработки данных, и хранилище центра обработки данных уведомляется об обновлении каждого компонента. Затем общее состояние передается stroe, запуская обновление для каждого вызывающего его компонента.

store触发组件更新

Рабочий процесс vuex

Давайте внимательнее посмотрим на картинку ниже, чтобы понять механизм ее работы.

  1. В компоненте vue диспетчеризация используется для запуска действий по отправке операции изменения данных.
  2. Затем инициируйте мутации для изменения данных посредством фиксации действий.
  3. Когда мутации получают запрос на фиксацию, они автоматически изменяют данные в состоянии (состояние данных в центре обработки данных) через Mutate.
  4. Наконец, хранилище запускает обновление для каждого вызывающего его компонента.

Примечание. Эта модель с односторонним потоком.

позже

Выше приведено все содержание этой статьи, я надеюсь, что она может вам помочь.

наконец: Если вам нужно перепечатать, пожалуйста, поставьте ссылку на оригинальный текст и подпишите его. Кодировать не просто,благодарныйслужба поддержки! Я пишу статью с менталитетом биржевых записей, и не хочу ее рвать, но приветствую подсказки. Тогда я надеюсь, что друзья, которые прочитают это, кликнутподобно, также можноСфокусируйся наПроверить меня.личный блог and Персональная домашняя страница Nuggets

Выше 2017.12.9

Категории