Разговор о вексе

внешний интерфейс GitHub JavaScript Vuex

Через кейс в корзине я узнал кусок vuex.

Говоря о концепции vuex

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

Если ваше приложение достаточно простое, вы можете не использовать Vuex. Для того, что вам нужно, достаточно простой глобальной шины событий. Однако, если вам нужно создать одностраничное приложение среднего или большого размера, вы, вероятно, обдумаете, как лучше управлять состоянием вне компонентов, и Vuex будет естественным выбором.

Основными понятиями являются в основном эти

  • Состояние Vuex использует единое дерево состояний — да, в одном объекте содержится все состояние уровня приложения, и сюда записываются необходимые данные, аналогично данным.
  • Добытчик Иногда нам нужно получить какое-то состояние из состояния в хранилище, используя геттеры, похожие на вычисляемые.
  • Мутация Единственный способ изменить состояние в магазине Vuex, аналогичный методам.
  • Действие Действие отправляет мутацию вместо прямого изменения состояния.Он может включать в себя любую асинхронную операцию.Здесь он в основном оперирует асинхронной операцией.Это почти то же самое,что и метод мутации,подобный методам.
  • Модуль Когда приложение становится очень сложным, объект хранилища может сильно раздуться. Vuex позволяет нам разделить хранилище на модули. Каждый модуль имеет свое состояние, мутации, действия, геттеры и даже вложенные подмодули.

vuex

Сначала вам нужно создать проект Vue
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
установить вуекс
npm install --save vuex
Настроить вьюекс

1. Создайте папку магазина

2. Создайте серию файлов js в папке магазина, как показано на рисунке.

这里写图片描述

3. Вставьте созданный ранее store.js в файл main.js.

import store from './store' 
new Vue({
  el: '#app',
  store,  //将store暴露出来
  components: { App },
  template: '<App/>'
})

4. Запишите данные, которые будут храниться в объекте состояния, а состояние будет сохранено в файле index.js.

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import shop from './modules/shop'

Vue.use(Vuex)
const state = {
  goods: [
    {
      id: '0',
      name: 'vivo-X20Plus屏幕指纹版',
      hint: '逆光也清晰，照亮你的美',
      price: 3596.00,
      num: 0,
      img: require('../assets/v.jpg')
    },
    {
      id: '1',
      name: '华为mate10Plus',
      hint: '真正的人工智能芯片',
      price: 4999.00,
      num: 0,
      img: require('../assets/h.jpeg')
    },
    {
      id: '2',
      name: '华为mate10Plus',
      hint: '真正的人工智能芯片',
      price: 4999.00,
      num: 0,
      img: require('../assets/v.jpg')
    }
  ],
  totalPrice: 0.00,
  totalNum: 0
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    shop //shop模块
  }
})

5. Напишите метод изменения исходных данных состояния в файлеmutation.js.Вы можете использовать константы вместо типа события Mutation.Вы можете использовать константы или нет - в больших проектах, требующих совместной работы нескольких человек , это будет очень полезно. Позволяет вашим коллегам по коду сразу увидеть, какие мутации содержит все приложение.

// 使用常量，这是mutation-type.js文件
export const ADD_CART = 'ADD_CART'
export const REDUCE_CART = 'REDUCE_CART'

// 这是mutation.js文件
import {
  ADD_CART,
  REDUCE_CART
} from './mutation-types.js'
export default {
  [ADD_CART] (state, id) {
    state.goods[id].num++
    state.totalNum++
    state.totalPrice += state.goods[id].price
    // console.log(state.totalPrice)
  },
  [REDUCE_CART] (state, id) {
    if (state.goods[id].num > 0) {
      state.goods[id].num--
      state.totalNum--
      state.totalPrice -= state.goods[id].price
    }
  }
}

6. Выведите некоторые состояния из данных о состоянии, например, вам нужно знать количество продуктов

const getters = {
  goods_obj: state => state.goods,
  goods_length: state => state.goods.length
}
export default getters

7. Используя vuex, получить данные, метод.

<template>
  <div class="hello">
    <ul class="shop_container">
      <li v-for="item in $store.state.goods" :key="item.id" class="shop_container_li">
        <div class="shop_img">
          <img :src="item.img" alt="" width="100%" height="100%"/>
        </div>
        <div class="shop_detail">
          <p>{{item.name}}</p>
          <p>{{item.hint}}</p>
          <p>￥{{item.price}}</p>
          <p>
            <span class="shop_reduce" @click="reduce_num(item.id)">-</span>
            <span class="shop_num">{{item.num}}</span>
            <span class="shop_add" @click="add_num(item.id)">+</span>
          </p>
        </div>
      </li>
    </ul>
    <div class="foot">
      <div class="total_price">
        <span>合计：￥{{totalPrice}}</span>
      </div>
      <div class="total_num" :class="{payment: totalNum}">
        <span>去结账：{{totalNum}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapMutations, mapGetters} from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  created () {
    // console.log(this.goods)
    // console.log(this.goods_obj)
    // console.log(this.goods_length)
    // console.log(this.$store.state.shop)  // 模块化 Vuex允许我们将 store 分割成模块（module）每个模块拥有自己的 state、mutation、action、getter、
  },
  computed: {
    ...mapState([
    // 获取state中的数据可以通过mapState辅助函数获取，也可以直接获取 例：this.$store.state.goods
      'goods', 'totalPrice', 'totalNum'
    ]),
    ...mapGetters([
      'goods_obj', 'goods_length'
    ])
  },
  methods: {
    ...mapMutations([
    // 获取mutation中的方法可以通过mapMutations 辅助函数获取，也可以直接获取。
      'ADD_CART'
      // 'REDUCE_CART'
    ]),
    reduce_num (id) {
      // this.REDUCE_CART(id)
      this.$store.commit('REDUCE_CART', id) //也可以直接获取
    },
    add_num (id) {
      this.ADD_CART(id) //通过mapMutations 辅助函数获取
    }
  }
}
</script>

8. Если данных слишком много и они сложные, их можно разработать с помощью модуляризации.Вышеупомянутое состояние, мутация, действие и т. д. могут быть записаны в файл shop.js одновременно. В это время магазин представляет собой модуль.

Суммировать

Если данных не много и они не сложные, мы также можем хранить нужные нам общие данные в данных сконструированного экземпляра vue. Если данные большие и сложные, vuex — очень хороший выбор для управления состоянием.

Усердно учитесь и надейтесь быть с Богом.

адрес гитхаба: https://github.com/flym1013/vuexDemo

Адрес предварительного просмотра эффекта: https://flym1013.github.io/vuexDemoBuild/

Предварительный просмотр рендеринга

这里写图片描述

Категории