vuex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex 也集成到 vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。本文主要介绍了浅谈vuex状态管理(全家桶)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
以上是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: '<app/>',
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下面的加减方法
<template>
<p class="hello">
<h1>hello vuex</h1>
<h5>{{$store.state.count}}</h5>
<p>
<button @click="$store.commit('jia')">+</button>
<button @click="$store.commit('jian')">-</button>
</p>
</p>
</template>
<!-- 加上scoped是css只在这个组件里面生效，为了不影响全局样式 -->
<style scoped>
h5{
font-size: 20px;
color: red;
}
</style>
5. 查看演示
6. state访问状态对象
使用computed计算
<template>
<p class="hello">
<h1>hello vuex</h1>
<h5>{{count}}</h5>
<p>
<button @click="$store.commit('jia')">+</button>
<button @click="$store.commit('jian')">-</button>
</p>
</p>
</template>
<script>
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'
// ])
}
</script>
7. mutations触发状态 （同步状态）
<template>
<p class="hello">
<h1>hello vuex</h1>
<h5>{{count}}</h5>
<p>
<button @click="jia">+</button>
<button @click="jian">-</button>
</p>
</p>
</template>
<script>
import {mapstate,mapmutations} from 'vuex'
export default{
name:'hello', //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用
//方法三
computed: mapstate([
'count'
]),
methods:{
...mapmutations([
'jia',
'jian'
])
}
}
</script>
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，保持一致。
组件中使用
<script>
import {mapstate,mapmutations,mapgetters} from 'vuex'
export default{
name:'hello',
computed: {
...mapstate([
'count'
]),
...mapgetters([
'count'
])
},
methods:{
...mapmutations([
'jia',
'jian'
])
}
}
</script>
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
})
在组件中使用
<template>
<p class="hello">
<h1>hello vuex</h1>
<h5>{{count}}</h5>
<p>
<button @click="jia">+</button>
<button @click="jian">-</button>
</p>
<p>
<button @click="jiaplus">+plus</button>
<button @click="jianplus">-plus</button>
</p>
</p>
</template>
<script>
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'
})
}
}
</script>
<style scoped>
h5{
font-size: 20px;
color: red;
}
</style>
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,
}
})
相关推荐：
实例分享vue全家桶实践项目总结
使用react全家桶搭建一个后台管理系统实例详解
vue2.0 全家桶开发的网页应用（参照吾记app)
以上就是关于vuex的全家桶状态管理的详细内容。