資訊專欄INFORMATION COLUMN
摘要：官方文檔對的解讀是是一個專為應用程序開發的狀態管理模式。而就是為了解決這樣的問題，把組件的共享狀態抽取出來，以一個全局單例模式管理。我們還可以傳入參數傳入一個對象可以修改中的狀態，但是并不是說隨隨便便修改的比如說
老規矩先安裝
npm install vuex --save
在看下面內容之前 你應該大概的看了一邊vuex官方的文檔對vuex有個大概對了解
首先
vuex 是屬于vue中的什么，它在項目中扮演著一個什么樣的角色，起到什么作用，在項目中我是否要用到vuex。
官方文檔對vuex的解讀是：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。
如果你是在開發一個大型的應用程序，組件與組件之間，兄弟組件之間，或者說多層嵌套組件之間，你是無法傳遞數據的。子父組件之間，也只是說通過事件保持數據的一致性，也是很繁瑣的，會變得很不好管理。而vuex就是為了解決這樣的問題，把組件的共享狀態抽取出來，以一個全局單例模式管理。組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行為，而且代碼將會變得更結構化且易維護。
新建一個最簡單的store
store.js
import Vue from vue
import Vuex from vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0,
me: {
name: huangenai,
age: 22,
sex: 女
},
list: [{name: hea, age: 22}, {name: cpq, age: 23}]
},
mutations: {
increment (state) {
state.count++
}
}
})
main.js
import store from ./store.js new Vue({ el: #app, router, store,//加這個 components: { App }, template: <App/> })
驅動應用的數據源,組件之間共享的狀態。
上面代碼中的 count 就是一個共享的數據，me 也是一個共享的數據對象。
在組件中獲得state 中的count
this.$store.state.count
newvue.vue
<template> <div> new vue page <p>{{count}}p> div> template> <script> export default { name: newvue, data () { return { } }, computed: { count () { return this.$store.state.count } } } script> <style scoped> style>
為什么要寫在computed 里面呢，而不是寫在data里面，因為當state.count 變化的時候, 都會重新求取計算屬性，并且觸發更新相關聯的 DOM,如果你不理解可以先去看看computed
當一個組件要引用到多個狀態的時候 ，一個個寫是不是很累。不用擔心，我們有mapState 輔助函數幫助我們生成計算屬性。
在組件中引用
import { mapState } from vuex
<template> <div> <p>{{count}}p> <p>{{countPlusLocalState}}p> <p>sex: {{sex}}p> <p>age: {{myAge}}p> <p>name: {{name}}p> div> template> <script> import { mapState } from vuex export default { name: newvue, data () { return { localCount: 1 } }, computed: { ...mapState({ // 箭頭函數可使代碼更簡練 sex: state => state.me.sex, myAge: state => state.me.age, name: state => state.me.name, // 傳字符串參數 age 等同于 `state => state.age` count: count, // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數 countPlusLocalState (state) { return state.count + this.localCount } }) } } script> <style scoped> style>
假設computed 里面還有別的數據，因為mapstate返回來的是一個對象所以我們這樣寫可以將數據混入
computed: {
localComputed () { /* ... */ },
// 使用對象展開運算符將此對象混入到外部對象中
...mapState({
// ...
})
}你說你想修改state的值，this.$store.state.count = 1 這樣可不可以 no no no.... 所以就有了Mutation。
想要修改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。
在上面代碼我們新建一個store里面下的 有一個increment，就可以實現修改state里面的count
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count ++
}
}
})
那么如何調用increment呢？？
調用 this.$store.commit(type) 類型叫increment 的 mutation。
this.$store.commit(increment)
我們還可以傳入參數
// ...
mutations: {
increment (state, n) {
this.$state.count = n
}
}
store.commit(increment, 10)
傳入一個對象
mutations: {
increment (state, data) {
state.count += data.count
}
}
store.commit(increment, {
count: 10
})mutations可以修改store中的狀態，但是并不是說隨隨便便修改的,比如說
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1731.html
摘要：目錄，前言，，例子，直接調用，將指向另一個對象，傳遞參數，，例子，直接調用，將指向另一個對象，傳遞參數，合并數組，，例子，直接調用，將指向另一個對象，傳遞參數，中裝飾器使用，總結，相同點，不同點，前言，前言和在函數式編程時候非常有用，本? 目錄 1，前言 1，call 1.1，例子 1.2，直接調用 1.3，將this指向另一個對象 1...
摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要：的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。的目標是通過盡可能簡單的實現響應的數據綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態環境組成了一個框架，下面，貼一個官方的漸進式框架介紹圖吧，方便理解。 前言 本人學習了一段時間的vue，并嘗試寫了一些小Demo之后，將vue投入了幾個項目之后，一直在邊學習邊使用，經過看了vue,vuex,vue-route...
摘要：的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。的目標是通過盡可能簡單的實現響應的數據綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態環境組成了一個框架，下面，貼一個官方的漸進式框架介紹圖吧，方便理解。 前言 本人學習了一段時間的vue，并嘗試寫了一些小Demo之后，將vue投入了幾個項目之后，一直在邊學習邊使用，經過看了vue,vuex,vue-route...
摘要：引言兩個月前用全家桶實現過一次酷狗音樂，最近又用全家桶重構了下，最終成果和的實現基本一致，放個圖手機預覽戳版本版本。的行為結構表現分離，很明顯，而的分離雖然不是很明顯，但實際上也是有的。發送指令，最終會到里合并數據，與中的類似。 引言 兩個月前用 Vue 全家桶實現過一次 酷狗音樂，最近又用 React 全家桶重構了下，最終成果和 Vue的實現基本一致，放個圖： showImg(htt...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
