vue vuex使用

vuex官网

概念，优缺点，就不多说了。vuex直白点说就是封装的一个数据共享的对象注入到vue根部，然后多界面共享里面的数据。
官网说法：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

那么现在简单介绍下vuex的核心：state,getter,actions,mutations；
那么一般使用步骤是先调用action异步获取数据，提交到mutations,其他地方通过调用getter或state使用即可，
mutation，和state必须要有的，getter和action根据实际情况确定要不要哦！
*注：下文this.$store为在man.js里面全局注册后可使用，不注册的话使用仍为store.state.状态值*

1、state，数据源，比如登陆状态，用户信息等，

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

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

2、getter，即获取数据，与state的不同在于它可以返回数据源也可以返回数据源的处理结果，

返回值会根据它的state被缓存起来，且只有当它的依赖值state发生了改变才会被重新计算


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 中的状态的唯一方法是提交 mutation,

与action唯一区别action为异步的， mutation为同步更新数据，当然如果保存数据没有异步操作，完全可以不要action，

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

调用如下
commit(SET_USERINFO, userinfo)
SET_USERINFO为定义的一个常量；

4.action 类似于 mutation，提交的是mutation，也就是说action异步获取数据，通过commit(SET_USERINFO, userinfo)更新state状态；

const actions={
  setUserInfo({ commit, state },query){
   //异步获取数据,query为参数
   ...
   提交到mutation更新state
    commit(SET_USERINFO, userInfo)
  }
}

调用state如下,setUserInfo为action里面的方法名
store.dispatch('setUserInfo'，{参数})

还有一个module,即不同模块。全部每个模块拥有自己的 state、mutation、action、getter，使结构清新，代码不至于臃肿；

目录结构如图

图片.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: ''
})

还有一种情况就是我们调用action更新数据的时候，既要返回数据，又要调用mutation保存更新数据。
这种状况就要用到 Promise了。这里就介绍一些基本常用操作，其他嵌套使用等更深层次参见官网
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve(res)
}, 1000)
})
}
}
调用：
store.dispatch('actionA').then(() => {
// ...
})