终於到了vuex拉!! Day10时有说之後要来研究,没想到这一天这麽快就到来,那就进入正题吧。
Vue.js中最小功能单位是「元件」,当网站扩展管理就变得更重要,重复利用要做的得淋漓尽致,且元件与元件之间是可以独立发展的。
就一般电商来说,当购物车增加一个商品,透过prop
和event
传值到父层子层,甚至是曾祖父层!! 需要同步的资料必须透过层层关卡传递,当其中一个环节被抽离了,那整个资料可能就会出现问题。元件变得不在是独立的个体,Vuex也因此诞生,可以解决这些问题。
javaScript有scoped的概念,当要处理跨模组/程序作用域的时候,最简单的方式就是丢到最外面,也就是全域的window。很方便但也很容易出错。
vuex提供了一个Store类似仓库的概念,功能就像window,任何人都可以从里面取资料,但不同的是存取有相当的规则,所以就可以避免修改全域变数造成错误的问题。
此外,从在仓库的资料具响应式更新特性,只要引入vuex的元件,都能在改变时同步更新到里面。
单一资料来源 : 资料都是从Store中拿的,在引用的元件中就会是统一的
单向资料流 : 需要修改状态,完全重新开始走修改的流程。这限制了状态修改的方式,让状态变得可预测,容易除错。
建立一个新的专案就可以看到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 密码学
今天来聊聊在ML里面一天到晚听到的gradient descent! Gradient descen...
Installation Download the package from https://gol...
嗨大家!连假第一天过得如何?~ 今天想跟大家分享的主题是各种网页渲染模式,就是 SSG、SSR、CS...
今天来说说温湿度读取的部分吧,首先来看看这颗的Datasheet: https://www.sila...
最後一篇,持续来介绍 VSCode 的套件,让你靠一套文字编辑器在路上横着走! CodeSpellC...