vue vuex使用

概念弦叶，優(yōu)缺點符喝，就不多說了招狸。vuex直白點說就是封裝的一個數(shù)據(jù)共享的對象注入到vue根部，然后多界面共享里面的數(shù)據(jù)扛或。
官網(wǎng)說法：

多個視圖依賴于同一狀態(tài)绵咱。
來自不同視圖的行為需要變更同一狀態(tài)。

那么現(xiàn)在簡單介紹下vuex的核心：state,getter,actions,mutations熙兔；
那么一般使用步驟是先調(diào)用action異步獲取數(shù)據(jù)悲伶，提交到mutations,其他地方通過調(diào)用getter或state使用即可，
mutation住涉，和state必須要有的麸锉，getter和action根據(jù)實際情況確定要不要哦！
*注：下文this.$store為在man.js里面全局注冊后可使用舆声，不注冊的話使用仍為store.state.狀態(tài)值*

1花沉、state，數(shù)據(jù)源媳握，比如登陸狀態(tài)碱屁，用戶信息等，

const state = {
  userInfo:{},
 loginState:false,
}

獲取方式
this.$store.state.loginState

2蛾找、getter娩脾，即獲取數(shù)據(jù)，與state的不同在于它可以返回數(shù)據(jù)源也可以返回數(shù)據(jù)源的處理結(jié)果打毛，

返回值會根據(jù)它的state被緩存起來柿赊，且只有當它的依賴值state發(fā)生了改變才會被重新計算


const getters={
//一般使用，同state作用一樣
   getUserInfo: (state) => {
    return  state.userInfo;
  }
//二般使用幻枉，（僅限舉例）
IsMan(state)=>{
if(state.userInfo.userName==='菜虛坤'){
return '女'
}else{
 return '男'
}

獲取getter
this.$store.getters.doneTodos

3碰声、mutation：更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,

與action唯一區(qū)別action為異步的， mutation為同步更新數(shù)據(jù)熬甫，當然如果保存數(shù)據(jù)沒有異步操作胰挑，完全可以不要action，

const mutations={
  [SET_USERINFO] (state, userInfo) {
    state.userInfo = userInfo
  },
}

調(diào)用如下
commit(SET_USERINFO, userinfo)
SET_USERINFO為定義的一個常量；

4.action 類似于 mutation洽腺，提交的是mutation脚粟，也就是說action異步獲取數(shù)據(jù)覆旱，通過commit(SET_USERINFO, userinfo)更新state狀態(tài)蘸朋；

const actions={
  setUserInfo({ commit, state },query){
   //異步獲取數(shù)據(jù),query為參數(shù)
   ...
   提交到mutation更新state
    commit(SET_USERINFO, userInfo)
  }
}

調(diào)用state如下,setUserInfo為action里面的方法名
store.dispatch('setUserInfo'，{參數(shù)})

還有一個module,即不同模塊扣唱。全部每個模塊擁有自己的 state藕坯、mutation、action噪沙、getter炼彪，使結(jié)構清新，代碼不至于臃腫正歼；

目錄結(jié)構如圖

圖片.png

userInfoModule代碼如下辐马；

import {SET_USERINFO} from "../moduleTypes";

const state = {
  userInfo:{},
}
const getters={
   getUserInfo: (state) => {
    return  state.userInfo;
  }
}
//mutations
const mutations={
  [SET_USERINFO] (state, userInfo) {
    state.userInfo = userInfo
  },
}
const actions={
  setUserInfo({ commit, state },query){
  // 異步獲取略...
   //  TODO 測試用
   let userInfo={
   name:'張三',
   sex:'男',
   }
    commit(SET_USERINFO, userInfo)
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

moduleTypes.js代碼

export const SET_USERINFO = 'SET_USERINFO'

export const SET_LOGIN_STATUS = 'SET_LOGIN_STATUS'

export const SET_TOKEN = 'SET_TOKEN'

index.js代碼

import Vue from 'vue'
import Vuex from 'vuex'
import userInfo from './modules/userInfoModule'
import createLogger from '../utils/logger'

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({
  modules: {
    userInfo，
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

獲取多個state和getter時局义，可使用如下

獲取多個state
computed: {
      ...mapState({
        userInfo: state => state.userInfo.userInfo,
        loginState: state => state.userInfo.loginState,
      }),
    },
//獲取多個getter
computed: {
  /
    ...mapGetters([
      userInfo: state => state.userInfo.getUserInfo,
      // ...
    ])
  }

最后別忘了在main.js里面注冊vuex哦喜爷！

import store from './store'
// Vue.prototype.$store=store;全局注冊store

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

還有一種情況就是我們調(diào)用action更新數(shù)據(jù)的時候，既要返回數(shù)據(jù)萄唇，又要調(diào)用mutation保存更新數(shù)據(jù)檩帐。
這種狀況就要用到 Promise了。這里就介紹一些基本常用操作另萤，其他嵌套使用等更深層次參見官網(wǎng)
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve(res)
}, 1000)
})
}
}
調(diào)用：
store.dispatch('actionA').then(() => {
// ...
})