vuex的使用

1：(获取state的方法一)

1-1:这是在state.js文件下定义的。

//根状态 const state = { appName: 'admin', stateValue: 'abc' } export default state

在state.js文件定义的属于根状态，可以全局访问使用 this.$store.state.appName

1-2：在模块下的状态如何获取和使用

这时候要使用 this.$store.state.user.userName 来获取  意思就是获取store的state下模块名下（user）的状态名(userName) 

2：(获取state的状态方法二)

import { mapState } from 'vuex' //相当于以下写法 //import vuex from 'vuex //const mapState = vuex.mapState computed: { //利用...展开操作符，相当于引入 //状态数组形式用法 ...mapState({ appName }) //状态对象用法 ...mapState({ appName: state => state.appName, userName: state => state.user.userName,//模块下的状态 }), } //对于模块下的状态我们还可以使用定义模块名的方式来使用（这是模块增加了命名空间的时候使用） ...mapState('user',{ userName:state=>state.userName })

3：getter的使用(类似与计算computed)

import {mapGetters } from 'vuex' appNameWithVersion () { return this.$store.getters.appNameWithVersion },

模块下的getters可以直接使用（除了命名空间下的）

4：mutations的使用（只能作同步操作）

methods: { ...mapMutations([ 'SET_USER_NAME', 'SET_APP_NAME', 'SET_STATE_VALUE' ]), changeUserName () { // this.$store.commit({ // type: 'SET_APP_NAME', // appName: 'newAppName' // }) // this.SET_APP_NAME({ // appName: 'newAppName' // }) // this.$store.state.user.userName = 'haha' 错误的方法 this.SET_USER_NAME('vue-cource') }, }

5：actions（异步操作）

import { getAppName } from '@/api/app' const actions = { // updateAppName ({ commit }) { // getAppName().then(res => { // const { info: { appName } } = res // commit('SET_APP_NAME', appName) // }).catch(err => { // console.log(err) // }) // } async updateAppName ({ commit }) { try { const { info: { appName } } = await getAppName() commit('SET_APP_NAME', appName) } catch (err) { console.log(err) } } } export default actions ...mapActions([ 'updateAppName' ]),