vuex的基本概念

1.什么是vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，它采用集中式存盤管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化

2.vuex能做什么

存盤組件公共資料

3.vuex的核心

vuex共有六大核心

state：存盤資料，存放vuex中的資料，

mutations：存盤方法 用來直接操作state中的資料，我們現在mutations中定義一個方法，設定兩個引數分別是state和自定義引數，然后在頁面中使用this.$store.commit('定義的方法名'，引數)，

export default new Vuex.Store({
  state: {
    token:'',
    username:''
  },
  mutations: {
    addtoken(state,data){
      state.token = data.token
      state.username = data.username
    }
  },
  actions: {
  },
  modules: {
  }
})

vue組件中通過事件來觸發，

<script>
methods:{
    add(){

    var obj = {
        token:res.data.data.remember_token,
        username:res.data.data.nickname
      }
      this.$store.commit('addtoken',obj)
}
    
}
</script>

actions：存盤方法 呼叫mutations中的方法 里面的方法回傳的是promise物件可以實作異步操作

export default new Vuex.Store({
  //存放資料
  state: {
    count: 5, 
  },
  //2.接受dispatch傳遞過來的方法和引數
  actions: {
    getParamSync (context,val) {
	    //處理異步操作
        setTimeout(()=>{
	        //3.通過commit提交一個名為getParam的mutation
	        //action 函式接受一個與 store 實體具有相同方法和屬性的 context 物件，因此你可以呼叫 context.commit 提交一個 mutation
            context.commit('increment',val)
        },3000)
    }
  }
})

vue組件中通過事件觸發action

methods: {
   getVal() {
	  //1.通過dispatch將方法getParamSync和多個引數{name,age,sex}傳遞給actions
	  this.$store.dispatch('getParamSync',1)
   }
 }

getters：對state中的資料做邏輯計算 類似于computed，

getters 接受 state 作為其第一個引數

const store = new Vuex.Store({
   //state存盤應用層的狀態
   state:{
      count:5  //總數：5
   },
   getters:{
      newCount:state => state.count * 3
   }
 });

modules：模塊存盤，

怎么使用modules呢？

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }
 
const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})

使用

 // computed屬性，從store 中獲取狀態state，不要忘記login命名空間，
 computed: {
  useName: function() {
   //return store.state.login.useName
    return this.$store.state.moduleA.useName
  }
 },
 methods:{
    changeName(){
       this.$store.dispatch("changeName",'jason');
    }
 }
}

plugins：插件（持久化存盤），

4.vuex的運行原理

在組件中通過dispatch來呼叫actions中的方法，在actions中通過commit來呼叫mutations中的方法，在mutaions中的方法中可以直接操作state中的資料，只要state中的資料發生改變，就會立即回應到所有的組件上

5.vuex的使用

1.基本使用 在vue的原型上有一個$store物件可以呼叫vuex的任何東西

• state this.$store.state.**

• mutations this.$store.commit("方法名",引數) 引數只能傳一個

• actions this.$store.dispatch("方法名",引數)

• getters this.$store.getters.**

• module this.$store.模塊名.state

2.使用映射函式

將vuex的中的成員映射到組件中然后使用

mapState mapMutations mapGetters mapActions

????步驟：

• 在組件中匯入需要的函式

  import {mapState,mapGetters **} from "vuex"

• 映射函式在組件中對應位置

  • mapState --computed

  • mapGetters --computed

  • mapMutations--methods

  • mapActions--methods

• 語法

  computed:{
      ...mapState(['student'])
  }

6.vuex的持久化

就是將vuex的資料存盤在本地（localStorage sessionStorage）

可以選擇手動的去寫，但是比較麻煩所以選擇 插件

• 下載

  cnpm install vuex-persistedstate --save

• 配置 store->index.js

  import persistedState from 'vuex-persistedstate'

  默認的使用localStorage
  plugins: [persistedState()]
  還可以配置成sessionStorage
  plugins: [persistedState({storage: window.sessionStorage})]

（只是本人的一點小見解，歡迎補充，如有不當的地方還望諒解！）