Day22-Vuex简介

终於到了vuex拉!! Day10时有说之後要来研究,没想到这一天这麽快就到来,那就进入正题吧。

为什麽需要

Vue.js中最小功能单位是「元件」,当网站扩展管理就变得更重要,重复利用要做的得淋漓尽致,且元件与元件之间是可以独立发展的。

就一般电商来说,当购物车增加一个商品,透过propevent传值到父层子层,甚至是曾祖父层!! 需要同步的资料必须透过层层关卡传递,当其中一个环节被抽离了,那整个资料可能就会出现问题。元件变得不在是独立的个体,Vuex也因此诞生,可以解决这些问题。

特性

javaScript有scoped的概念,当要处理跨模组/程序作用域的时候,最简单的方式就是丢到最外面,也就是全域的window。很方便但也很容易出错。

vuex提供了一个Store类似仓库的概念,功能就像window,任何人都可以从里面取资料,但不同的是存取有相当的规则,所以就可以避免修改全域变数造成错误的问题。

此外,从在仓库的资料具响应式更新特性,只要引入vuex的元件,都能在改变时同步更新到里面。

  1. 单一资料来源 : 资料都是从Store中拿的,在引用的元件中就会是统一的

  2. 单向资料流 : 需要修改状态,完全重新开始走修改的流程。这限制了状态修改的方式,让状态变得可预测,容易除错。

    https://vuex.vuejs.org/flow.png

安装

建立一个新的专案就可以看到Vuex选项,把他勾起来!

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
>(*) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

若是想在已建立专案可以在专案目录下的中端机执行

vue add vuex@next

没有vue CLI也可以使用npm或yarn

npm install vuex@next --save
yarn add vuex@next save

还有CDN

<script src="https://unpkg.com/vuex@next"></script>

安装後就可以看到src之下有个store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

若采用其他安装方式的话可以自行建立一个stors.js档案

import { createApp } from 'vue'
import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* your root component */ })

// Install the store instance as a plugin
app.use(store)

参考资料

Vuex的单向资料流
https://www.itread01.com/content/1550424808.html
Getting Started
https://next.vuex.vuejs.org/guide/


<<:  [Day22]ISO 27001 附录 A.10 密码学

>>:  Day28 遇到挫折时该怎麽办?

Gradient Descent

今天来聊聊在ML里面一天到晚听到的gradient descent! Gradient descen...

[Golang] Go Installation and Basic Toolchain Introduction

Installation Download the package from https://gol...

#03 No-code 之旅 — 什麽是 SSG、SSR、CSR、ISR?

嗨大家!连假第一天过得如何?~ 今天想跟大家分享的主题是各种网页渲染模式,就是 SSG、SSR、CS...

[DAY 16] _Si7020温湿度读写

今天来说说温湿度读取的部分吧,首先来看看这颗的Datasheet: https://www.sila...

VSCode 套件推荐系列 - 下

最後一篇,持续来介绍 VSCode 的套件,让你靠一套文字编辑器在路上横着走! CodeSpellC...