一、vuex是什麼？

　　vuex是一個為vue.js應用程式開發的狀態管理模式，它採用集中式儲存管理應用的所有元件的狀態，並以響應的規則保證狀態以一種不可預測的方式發生變化。

　　簡單來說：vuex就是把需要共享的變數全部儲存在一個物件中，然後將這個物件放在頂層元件中供給其他元件使用。vue比作js檔案，元件是函式，vuex是全域性變數，只是vuex包含了一些特定的規則而已。

二、vuex的五個基本物件是什麼？

const store = new Vuex.Store({
 state: {
 name: 'weish',
 age: 22
 },
 getters: {
 personInfo(state) {
 return `My name is ${state.name}, I am ${state.age}`;
 }
 }
 mutations: {
 SET_AGE(state, age) {
 commit(age, age);
 }
 },
 actions: {
 nameAsyn({commit}) {
 setTimeout(() => {
 commit('SET_AGE', 18);
 }, 1000);
 }
 },
 modules: {
 a: modulesA
 }
}
 

　　state：　　 儲存狀態，也是變數；

　　getter：　　對state裡面的屬性進行計算，訪問vuex中的屬性都需要getter獲取。getter需要單獨成一個檔案

　　　　　　　　外部呼叫方式：store.getters.personInfo()。

　mutations： 提交狀態修改。是唯一修改state的方式，但不支援非同步操作。

　　　　　　　 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation

　　Action：　　提交的是mutation，而不是直接改變狀態；

　　　　　　　　action可以包含非同步操作

　　　　　　　　外部呼叫方式：store.dispatch('nameAsyn')。

　　modules：　 stote的子模組，內容相當於store的一個例項。

　　　　　　　 　外部呼叫方式：store.a.getters.xxx()。

　　非同步:dispatch一個action，commit一個mutation

state

state:{
  userViews:[],
}

mutations

ADD_USERID(state,name){
 if (state.userViews.some(v => v.name=== name.fullName)) return
      state.userViews.push(name)
}

actions

addUserid({commit},name){
  return new Promise((resolve,reject)=>{
  commit ('ADD_USERID',name)
  resolve("success")
})
}

getters.js

let getters = {
  userViews: state => state.app(*state.action等所在的資料夾名稱*).userViews,
}
export default getters

在頁面中引用各個模組

state

第一種方式：<h3>當前最新的count是：{{this.$store.state.count}}</h3>}

第二種方式：物件展開運算子

import { mapState  } from 'vuex'
computed:{
    ...mapState(['subCount']),
},
頁面中:
<h3>當前最新的subCount是：{{subCount}}</h3>

mutations

第一種方式：

import { mapMutations } from 'vuex'
methods:{
        ...mapMutations(['sub','subN']),
}
頁面：
<button @click="sub">-1</button>
<button @click="subN(3)">-N</button>

第二種方式：元件中使用 this.$store.commit('xxx')

<button @click="handelAdd">+1</button>
<button @click="handelAdd1">+N</button>
methods:{
handelAdd(){
    this.$store.commit('add')
},
handelAdd1(){
    this.$store.commit('addN',3)
},
}

actions

第一種方式：

import {  mapActions } from 'vuex'
methods:{
     ...mapActions(['subAsyns','subNAsyns']),
}
頁面：
<button @click="subAsyns">-1 Asyns</button>
<button @click="subNAsyns(3)">-N Asyns</button>

第二種方式：

<button @click="handelAdd2">+1 Async</button>
<button @click="handelAdd3">+N Async</button>
methods:{
handelAdd2(){
// dispatch來觸發actions裡面某個函式
this.$store.dispatch('addAsync')
},
handelAdd3(){
this.$store.dispatch('addNAsync',3)
}
}

getters

第一種方式：

import {mapGetters } from 'vuex'
computed:{
    ...mapGetters(['show2Num'])
},

頁面：
<h1>{{show2Num}}</h1>