Vuex状态管理应如何使用

这次给大家带来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.js
Vue.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下面的加减方法

5. 查看演示

6. state访问状态对象

使用computed计算

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

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，保持一致。
组件中使用

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
})

在组件中使用

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使用模块组的方式 moduleA
const moduleA = {
  state,
  mutations,
  getters,
  actions
}
// 模块B moduleB
const moduleB = {
  state: {
    count:108
  }
}
export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5响应式企业官网源码2.9

cqcms通用企业建站介绍 H5响应式企业官网源码(带手机端)后台非常简单，一个后台同时管理PC和wap。把图片和文字稍加修改，就可以使用。适合任何企业网站 安装步骤： 1、下载文件，并且解压到网站的根目录，配置好apache/IIS虚拟主机以及伪静态; 2、安装网址http://localhost/（localhost为您网址地址） 3、网站后台入口

下载