这次给大家带来Vuex状态管理应如何使用，Vuex状态管理使用的注意事项有哪些，下面就是实战案例，一起来看一下。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

以上是vuex的官方文档对vuex的介绍，官方文档对vuex的用法进行了详细的说明。这里就不再细讲vuex的各个用法，写这篇博客的目的只是帮助部分同学更快地理解并上手vuex。

1. 安装

$ npm install vuex --save

登录后复制

2. 在main.js 主入口js里面引用store.js

import Vue from 'vue'import App from './App'import router from './router' import store from './vuex/store'  //引用store.jsVue.config.productionTip = false //阻止在启动时生成生产提示 //vue实例new Vue({ el: '#app', router, store,              //把store挂在到vue的实例下面 template: '', components: { App }})

登录后复制

3. 在store.js里引用Vuex

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) //注册Vuex// 定义常量  如果访问他的话，就叫访问状态对象const state = {  count: 1}// mutations用来改变store状态, 如果访问他的话，就叫访问触发状态const mutations = {  //这里面的方法是用 this.$store.commit('jia') 来触发  jia(state){    state.count ++  },  jian(state){    state.count --  },}//暴露到外面，让其他地方的引用export default new Vuex.Store({  state,  mutations})

登录后复制

4. 在vue组件中使用

使用$store.commit(‘jia’)区触发mutations下面的加减方法

 
   
Hello Vuex
   
{{$store.state.count}}
   
    +    -   
 
  h5{   font-size: 20px;   color: red;  }

登录后复制

5. 查看演示

6. state访问状态对象

使用computed计算

 
   
Hello Vuex
   
{{count}}
   
    +    -   
 
import {mapState} from 'vuex'export default{  name:'hello', //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用  // 方法一  // computed: {  //  count(){  //   return this.$store.state.count + 6  //  }  // }    // 方法二 需要引入外部 mapState  computed:mapState({   count:state => state.count + 10  })   // ECMA5用法  // computed:mapState({  //  count:function(state){  //   return state.count  //  }  // })    //方法三  // computed: mapState([  //  'count'  // ]) }

登录后复制

7. mutations触发状态 （同步状态）

 
   
Hello Vuex
   
{{count}}
   
    +    -   
 
import {mapState,mapMutations} from 'vuex' export default{  name:'hello', //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用  //方法三  computed: mapState([   'count'  ]),  methods:{   ...mapMutations([     'jia',     'jian'   ])  } }

登录后复制

8. getters计算属性

getter不能使用箭头函数，会改变this的指向

在store.js添加getters

// 计算const getters = {  count(state){    return state.count + 66  }}export default new Vuex.Store({  state,  mutations,  getters})//count的参数就是上面定义的state对象//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。组件中使用 import {mapState,mapMutations,mapGetters} from 'vuex' export default{  name:'hello',  computed: {   ...mapState([    'count'   ]),   ...mapGetters([    'count'   ])  },  methods:{   ...mapMutations([     'jia',     'jian'   ])  } }

登录后复制

9. actions (异步状态)

在store.js添加actions

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 定义常量const state = {  count: 1}// mutations用来改变store状态 同步状态const mutations = {  jia(state){    state.count ++  },  jian(state){    state.count --  },}// 计算属性const getters = {  count(state){    return state.count + 66  }}// 异步状态const actions = {  jiaplus(context){    context.commit('jia') //调用mutations下面的方法    setTimeout(()=>{      context.commit('jian')    },2000)    alert('我先被执行了，然后两秒后调用jian的方法')  },  jianplus(context){    context.commit('jian')  }}export default new Vuex.Store({  state,  mutations,  getters,  actions})

登录后复制

在组件中使用

 
   
Hello Vuex
   
{{count}}
   
    +    -   
   
    +plus    -plus   
 
 import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{  name:'hello',  computed: {   ...mapState([    'count'   ]),   ...mapGetters([    'count'   ])  },  methods:{   // 这里是数组的方式触发方法   ...mapMutations([     'jia',     'jian'   ]),   // 换一中方式触发方法 用对象的方式   ...mapActions({    jiaplus: 'jiaplus',    jianplus: 'jianplus'   })  } }  h5{   font-size: 20px;   color: red;  }

登录后复制

10. modules 模块

适用于非常大的项目，且状态很多的情况下使用，便于管理

修改store.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {  count: 1}const mutations = {  jia(state){    state.count ++  },  jian(state){    state.count --  },}const getters = {  count(state){    return state.count + 66  }}const actions = {  jiaplus(context){    context.commit('jia') //调用mutations下面的方法    setTimeout(()=>{      context.commit('jian')    },2000)    alert('我先被执行了，然后两秒后调用jian的方法')  },  jianplus(context){    context.commit('jian')  }}//module使用模块组的方式 moduleAconst moduleA = {  state,  mutations,  getters,  actions}// 模块B moduleBconst moduleB = {  state: {    count:108  }}export default new Vuex.Store({  modules: {    a: moduleA,    b: moduleB,  }})

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

以上就是Vuex状态管理应如何使用的详细内容，更多请关注【创想鸟】其它相关文章！