vuex环境管理

1、什么是vuex？

vuex是一个专门为vue设计的集中式状态管理框架，

vuex的状态 state   getter   mutations    actions

state：存入全部的应用层状态，供vue组件渲染时调用   // 类似于vue里面的 data

getter：从state中派生出的状态，就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生变化了才会重新计算。 // 类似于vue里面的computed

mutations：更改vuex的state中的状态的唯一方法是mutation，vuex中的mutation非常类似于事件，每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler），这个回调函数就是我们实际进行状态改变的地方，并且它会接受state作为第一个参数。//   类似于vue里面的methods

actions：action类似mutation，他们的不同点在于action提交的是mutation，而不是直接变更状态，action可以包含任意异步操作

2、vuex怎么用？

直接上脚手架搭建的项目

npm install vuex --save

在main.js同级新建store.js

store.js 内容

在main.js引入新建store.js

import store from './store.js'

new Vue({

     el: '#app',

      router,

      store,

      template: '',

      components: {

         app

      }

})

这样就可以在需要用到的组件中通过this.$store引用到这个状态store对象。这个是基础用法

3、vuex模块化

不多说，直接上代码，目录结构

main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'



Vue.config.productionTip = false

new Vue({

    router,

    store,

    render: h => h(App)

}).$mount('#app')

index.js

import Vue from 'vue'

import Vuex from 'vuex'

import token from './mod/token'

import user from './mod/user'

import getters from './getters'



Vue.use(Vuex)



export default new Vuex.Store({

    state: {},

    getters: {

        ...getters

    },

    mutations: {},

    actions: {},

    modules: {

        token,

        user

    }

})

getters.js

const getters = {

    tokenId: state => state.token.tokenId,

    userId: state => state.user.userId

}

token.js

const token = {

    state: {

        tokenId: '12kkjdsajfdfsfdsjfdskaf4234jkdskf'

    },

    mutations: {

        setTokenId(state, data) {

            state.tokenId = data

        }

    },

    actions: {

        actTokenId(context, args) {

            context.commit('setTokenId', args)

        }

    }

}

export default token

user.js

const user = {

    state: {

        userId: '1000001'

    },

    mutations: {

        setUserId(state, data) {

            state.userId = data

        }

    },

    actions: {

        actUserId(context, args) {

            context.commit('setUserId', args)

        }

    }

}

export default user

4、怎么用，结合vuex辅助函数

<script>

import {mapGetters, mapMutations, mapActions, mapState} from 'vuex'

export default {

  name: 'app',

  data() {

    return {

      name: '测试vuex'

    }

  },

  mounted() {

    this.setUserId('2000002')

    this.actUserId('1')

  },

  computed: {

    ...mapState({

      userId: state => state.user.userId,

      tokenId: state => state.token.tokenId

    })

    // ...mapGetters(['userId', 'tokenId'])

  },

  methods: {

    ...mapMutations(['setUserId']),

    ...mapActions(['actUserId'])

  }

}

</script>

这样就可以在你的项目里面引用环境变量了

5、vuex应用场景

状态管理就是管理全局变量，在我们的项目中，特别是较大型的项目，会有很多参数是很多地方都会用到的，比如一个登录的token，很多页面都会需要这个信息，也就是项目中的一些公共变量，存储在vuex中，方便开发调用