?

作用：集中存儲和管理應用的所有組件狀態。通俗的說，就是集中存儲、計算、處理數據

一個項目只有一個數據源，所用的組件共用一個倉庫（Store）

使用場景：組件間存在公用依賴的數據

在Store倉庫里，有以下幾種屬性：

state是用來存放數據,遠程加載數據，加載的是一個靜態的數據;

getters是初步獲取和簡單處理state里面的數據(這里的簡單處理不能改變state里面的數據)

//定義getters 不推薦使用箭頭函數 const getters = {count:function(state){return state.count +=100} }; //使用mapGetters <script> //引入 import {mapState,mapMutations,mapGetters} from 'vuex' computed:{ ...mapState([ " count" ]), ...mapGetters([ "count" ]) }, </script>

?

?

mutation：里面裝著一些改變數據方法的集合,把處理數據邏輯方法全部放在mutations里面?

注：Vuex中store數據改變的唯一方法就是mutation

mutation結構：{type:handler()}, 事件類型(type)和回調函數(handler)

調用type的時候需要用到store.commit方法。

載荷（payload）:簡單的理解就是往handler(state)中傳參

//定義mutation
import Vuex from 'vuex'const store = new Vuex.Store({state: {count: 1},mutations: {increment (state, n) { // type:increment，handler第一個參數是state；state.count += n}} })//使用mutationstore.commit('increment') //調用type，觸發handler（state） 或者import { mapMutations } from 'vuex'export default {methods: {...mapMutations(['increment' // 映射 this.increment() 為 this.$store.commit('increment')]),

?

Action 提交的是 mutation，而不是直接變更狀態. Action 是異步的，mutation是同步的。

vuex學習---簡介的案例：這里是加10 減1

在store.js 中 代碼為：

import Vue from 'vue' import Vuex from 'vuex'//使用vuex模塊 Vue.use(Vuex);//聲明靜態常量為4 const state = {count : 4 };const mutations = {add(state,n){state.count +=n.a;},sub(state){state.count--;} };const actions = {//2種書寫方式addplus(context){ //可以理解為代表了整個的contextcontext.commit('add',{a:10}) },subplus({commit}){commit('sub');} };//導出一個模塊 export default new Vuex.Store({state,mutations,actions })

?

?

2.在App.vue中 代碼如下：

<template><div id="app"> <div id="appaaa"> <h1>這是vuex的示例</h1> <p>組件內部count{{count}}</p> <p> <button @click = "addplus">+</button> <button @click = "subplus">-</button> </p> </p> </div> </div> </template> <script> //引入mapGetters import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default { name:'app', data(){ return { } }, computed:{ ...mapState([ "count" ]), }, methods:{ ...mapActions([ "addplus", "subplus" ]) } } </script> <style> </style>

?

mapXXXX

核心：map其實就是一個在store文件中的映射而已，就是不用讓你要調用一個值需要敲這么多代碼

如果有以下的定義方式：

methods: {...mapActions(['foo','bar']) }

則相當于

methods: {foo(...args) {return this.$store.dispatch.apply(this.$store, ['foo'].concat(args))}bar(...args) {return this.$store.dispatch.apply(this.$store, ['bar'].concat(args))} }

官網的vuex的例子中，有這種寫法：

methods: {...mapActions(['some/nested/module/foo','some/nested/module/bar']) }

則相當與

methods: {foo(val){return this.$store.dispatch('some/nested/module/foo', val))}//bar 省略....}) }

?

vuex實例: ?http://www.jb51.net/article/110212.htm

?

vue在同一個組件內；

methods中的一個方法調用methods中的另外一個方法

可以在調用的時候? this.$options.methods.xxx()

?

在App.vue組件中使用mapMutations傳參，修改state數據（狀態）
要點： 要寫在methods下面，因為mapActions/mapMutations只是把action/mutation函數綁定到你的methods里了;你調methods里的方法的時候照常傳參就可以了。 ?

npm rm vuex --save

然后安裝最新的vuex

npm install vuex --save

?

?

try{
const res = await getAdminInfo(username)
if (res.code == '1') {
console.log(res.data);
commit('saveAdminInfo', res.data);
}else{
throw new Error(res)
}
}catch(err){
console.log('您尚未登陸或者session失效')
}

?

?

轉載于:https://www.cnblogs.com/zhaojinxin/p/8528551.html

總結

以上是生活随笔為你收集整理的Vuex-状态管理模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。