vuex

vuex：state、mutation、action、getter、mutation-type.js
1、state
组件访问state数据的方式：①this.$store.state.数据名称
在template中this可以省略
②

import { mapState } from 'vuex'
computed:{
  ...mapState(['数据名称'])
}

在template中取值可以省略this直接写数据名称

可以在store中定义多个包含state、mutation、anction对象并export出去就可以通过this.$store.state.xxxx访问到

2、mutation 用于变更store中的数据
不能直接操作state修改数据
this.$store.commit('方法名')

//定义mutation
const store=new Vuex.store({
   state:{
     count:0
     },
     mutations:{
       add(state){
         state.count++
        },
        addN(state,step){
          state.count += step
        } 
      }
})
//触发mutation
this.$store.commit('add')
this.$store.commit('addN',3)

this.$store.commit()是触发mutations的第一种方式
第二种方式

import { mapMuations } frpm 'vuex'
//通过导入的mapMutations函数 映射为当前组建的methods函数
methods:{
   ...mapMutations(['add','addN']),
   this.add()
   this.addN(3)
}

某个export的mutationthis.$store.commit("map/DELETE_ITEMID",参数);
3、action
如果通过异步操作变更数据，必须通过action，不能使用mutation，但是在action中还是要通过触发mutation的方式间接变更数据
actions中xxxx(context){context.commit('方法名')}或xxxx({commit}){commit('方法名')}
触发action第一种方式this.$store.dispatch('方法名',参数)
第二种方式

import { mapActions } from 'vuex'
methods:{
   ...mapActions(['方法名','方法名'])
}

4、getter
①getter可以对store中已有的数据加工处理之后形成的数据 类似计算属性
②store中的数据发生变化getter的数据也会跟着变化
一般会定义一个getter.js

import Vue from 'vue'
const getters = {
  device: state => state.app.device,
  userInfo: state => {state.user.info = Vue.ls.get(USER_INFO); return state.user.info},
  addRouters: state => state.permission.addRouters
}

export default getters

使用getters this.$store.getters.xxxx

import { mapGetters } from 'vuex'
methods:{
   ...mapGetters(['名'])
}

5、mutation-type.js
vuex中建立的mutation-type.js专门来放mutation、actions 里用到的方法常量值
即在mutation-type.js中定义值在mutations、actions中设置值

//mutation-type.js
export const ACCESS_TOKEN = 'Access-Token'
export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'

//store-user.js
 Login({ commit }, userInfo) {
      debugger
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          if (response.code == '200') {
            console.log("已经进入action login")
            const result = response.result
            const userInfo = result.userInfo
            Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
            Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
            commit('SET_TOKEN', result.token)
            commit('SET_INFO', userInfo)
            commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, })
            commit('SET_AVATAR', userInfo.avatar)
            resolve(response)
          } else {
            reject(response)
            const result = response.data.message
          }
        }).catch(error => {
          reject(error)
        })
      })
    },