vuex 简单实例及详解
关于vuex的概念解释
官网介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（对于我这样的初学者，真的理解不到哪里去，只能理解字面意思）
个人理解
全局管理数据的一个强大有力工具：无非是（ state/mapState）、（ mutations/mapMutations）、（ getters/mapGetters）、（ actions/mapActions）、Modules
配对更有利于你的理解，前者再store里面定义，后者是在你的单页面使用。Vuex的存储状态是响应式，也就是store里面的数据变化，其他页面会随之变化（栗子：你喝了水杯里面的水，会立即会立即看到水杯里的水会减少一样，所见即所得）。把这几个的难易理解程度从简单到难排个序吧modules–state–mutations–actions–getters。
vuex的安装
第一步：npm安装
npm install vuex --save
第二步：页面中引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
第三步：新建一个仓库store
新建一个vue项目或者框架构建项目时都已经有了。
const store = new Vuex.Store({
state:{ }，
mutations:{ }，
actions:{ }，
getters:{ }，
});
state/mapState
先介绍这一对新人吧：
const store = new Vuex.Store({
//state存储应用层的状态
state:{
name:‘awei’ ; //名字：阿伟
sex:‘man’ ; //性别：男
}
});
state代码解释：
- 整体先建立一个store，每一个项目只有一个单独的store文件夹存放，切不可重复（这应该是废话了）；
- sotre 文件的建立，如此这般new一个就可以；
- 如何往state 添加数据，我在这里已经写了两个了以此类推就好；
<script>
//文章编辑无法识别template我就把它放在这里了哈，这是开始
<div>
<h4>state</h4>
name:{{name}}
sex:{{sex}}
</br>
thisName:{{thisName}}
</div>
//文章编辑无法识别template我就把它放在这里了哈，这是结束
import { mapState } from 'vuex'
export default {
computed: {
// 共有三种写法
// 方法01
thisName () {
return this.$store.state.name //得到答案 awei man
},
// 方法02（最常用）
...mapState(['name','sex] ) //得到答案 awei man
// 方法03
...mapState({ name: state => state.name ;sex: state => state.sex ;})
//得到答案 awei man
},
}
</script>
mapState代码解释：
- mapState注意大小写，这是一种语法糖，便于我们更好的得到数据；
- 用法按照这般就好；
- 但是一定要放在computed里面；
mutations/mapMutations
代码示例：
const store = new Vuex.Store({
//state存储应用层的状态
state:{
name:‘awei’ ; //名字：阿伟
sex:‘man’ ; //性别：男
allInfo:’ ’
}，
// 修改状态（$store.commit()）
mutations: {
mutaChagnename (state) {
state.name += ‘liu’ //得到 name=aweiliu
},
mutaChagneall (state) {
state.allInfo = state.name + state.sex // 得到 allinfo=aweiman
},
mutaChagneage (state, payload) {
state.age = payload.agef
// payload（荷载） 是一个对象官方推荐
//根据单页面传过来是多少 age=payload.agef
},
// state 是指当前store里面的state，通过state来获取state里面的数据，
// agef则是单页面里面面传过来的值、对象、数组等。以此实现state的数 据变化。
},
});
Mutations代码解释：
- 这里的代码把state的都放在一起，下面的同样；
- 更改Vuex 的 store 中的状态的唯一方法是提交 mutation
- mutations的写法，代码详解看代码注释。
<script>
//文章编辑无法识别template我就把它放在这里了哈，这是开始
<div>
<h4>state</h4>
name:{{name}}
age:{{age}}
</br>
allInfo:{{allInfo}}
<h4>mutations</h4>
<el-button @click="mutaChagnenamef()">mutaChagnenamef</el-button>
查看到的结果name={{name}}
<hr>
<el-button @click="mutaChagnename()">mutaChagnename</el-button>
查看到的结果name={{name}}
<hr>
<el-button @click="mutaChagneall()">mutaChagneall</el-button>
查看到的结果allinfo={{allInfo}}
<hr>
<el-button @click="mutaChagneagef(24)">
mutaChagneagef
</el-button>
更改age{{age}}
<hr>
</div>
//文章编辑无法识别template我就把它放在这里了哈，这是结束
import { mapMutations , mapState } from 'vuex'
export default {
computed: {
// 共有三种写法
// 方法01
thisName () {
return this.$store.state.name //得到答案 awei man
},
// 方法02（最常用）
...mapState(['name','sex] ) //得到答案 awei man
// 方法03
...mapState({ name: state => state.name ;sex: state => state.sex ;})
//得到答案 awei man
},
methods: {
// 方法01
mutaChagnenamef () {
this.$store.commit('mutaChagnename') // 执行此函数会得到 name=awei liu
},
// 方法02 获取所有方法
...mapMutations(
['mutaChagnename', 'mutaChagneall', 'mutaChagneage'] //这里获取到你要使用的方法。在div里面可以直接使用，例如@click='mutaChagnename'
),
// 这里可以给这些方法重新命名，乳下：
...mapMutations(
{change01:'mutaChagnename',change02: 'mutaChagneall', change03:'mutaChagneage'}
),
//使用方法，例如@click='change01()'
// 方法03
mutaChagneagef (agef) {
this.$store.commit('mutaChagneage',{ agef })
},
}
}
</script>
mapMutations代码解释：
- mapMutations同样注意大小写；
- 用法按照这般就好；
- 但是一定要放在methods里面；
actions/mapActions
代码示例：
const store = new Vuex.Store({
//state存储应用层的状态
state:{
name:‘awei’ ; //名字：阿伟
sex:‘man’ ; //性别：男
allInfo:’ ’
}，
// 修改状态（$store.commit()）
mutations: {
mutaChagnename (state) {
state.name += ‘liu’ //得到 name=aweiliu
},
mutaChagneall (state) {
state.allInfo = state.name + state.sex // 得到 allinfo=aweiman
},
mutaChagneage (state, payload) {
state.age = payload.agef
// payload（荷载） 是一个对象官方推荐
//根据单页面传过来是多少 age=payload.agef
},
// state 是指当前store里面的state，通过state来获取state里面的数据，
// agef则是单页面里面面传过来的值、对象、数组等。以此实现state的数 据变化。
},
actions: {
getAge ({ commit }, Object) {
commit(‘mutaChagneage’, Object)
},
}
});
action代码解释：
-
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。mutations则是同步操作； -
action的写法，详解看代码注释。
<script>
//文章编辑无法识别template我就把它放在这里了哈，这是开始
<div>
<h4>state</h4>
name:{{name}}
age:{{age}}
</br>
allInfo:{{allInfo}}
<h4>mutations</h4>
<el-button @click="mutaChagnenamef()">mutaChagnenamef</el-button>
查看到的结果name={{name}}
<hr>
<el-button @click="mutaChagnename()">mutaChagnename</el-button>
查看到的结果name={{name}}
<hr>
<el-button @click="mutaChagneall()">mutaChagneall</el-button>
查看到的结果allinfo={{allInfo}}
<hr>
<el-button @click="mutaChagneagef(24)">
mutaChagneagef
</el-button>
查看到的结果age{{age}}
<hr>
<h4>actions</h4>
<el-button @click="getAge(25)">
getAge
</el-button>
查看到的结果getAge:{{getAge}}
</div>
//文章编辑无法识别template我就把它放在这里了哈，这是结束
import { mapMutations , mapState } from 'vuex'
export default {
computed: {
// 共有三种写法
// 方法01
thisName () {
return this.$store.state.name //得到答案 awei man
},
// 方法02（最常用）
...mapState(['name','sex] ) //得到答案 awei man
// 方法03
...mapState({ name: state => state.name ;sex: state => state.sex ;})
//得到答案 awei man
},
methods: {
// 方法01
mutaChagnenamef () {
this.$store.commit('mutaChagnename') // 执行此函数会得到 name=awei liu
},
// 方法02 获取所有方法
...mapMutations(
['mutaChagnename', 'mutaChagneall', 'mutaChagneage'] //这里获取到你要使用的方法。在div里面可以直接使用，例如@click='mutaChagnename'
),
// 这里可以给这些方法重新命名，乳下：
...mapMutations(
{change01:'mutaChagnename',change02: 'mutaChagneall', change03:'mutaChagneage'}
),
//使用方法，例如@click='change01()'
// 方法03
mutaChagneagef (agef) {
this.$store.commit('mutaChagneage',agef)
},
},
//01 action方法
...mapActions(
['getAge','getAllname']
),
//02
getAgef(value){
this.$store.dispatch('getAge',{value})
},
}
</script>
mapActions代码解释：
- mapState同样注意大小写；
- 在组件中使用 this.$store.dispatch(‘xxx’) 分发 action；
- mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用,…mapActions要放在methods里面。
getters/mapGetters
代码示例：
const store = new Vuex.Store({
//state存储应用层的状态
state:{
name:‘awei’ ; //名字：阿伟
sex:‘man’ ; //性别：男
allInfo:’ ‘，
height:’’,
}，
// 修改状态（$store.commit()）
mutations: {
mutaChagnename (state) {
state.name += ‘liu’ //得到 name=aweiliu
},
mutaChagneall (state) {
state.allInfo = state.name + state.sex // 得到 allinfo=aweiman
},
mutaChagneage (state, payload) {
state.age = payload.agef
// payload（荷载） 是一个对象官方推荐
//根据单页面传过来是多少 age=payload.agef
},
// state 是指当前store里面的state，通过state来获取state里面的数据，
// agef则是单页面里面面传过来的值、对象、数组等。以此实现state的数 据变化。
},
actions: {
getAge ({ commit }, Object) {
commit(‘mutaChagneage’, Object)
}
}，
getters: {
height(state) {
return state.height + ‘cm’ //实现身高后面加一个cm单位
}
});
getters代码解释：
-
getters是一种数据获取之前的进一步加工操作；就比如得到了身高的一个数据但是没有单位，你再给他加上一个单位。
-
getters的写法，详解看代码注释。
<script>
//文章编辑无法识别template我就把它放在这里了哈，这是开始
<div>
<h4>state</h4>
name:{{name}}
age:{{age}}
</br>
allInfo:{{allInfo}}
<h4>mutations</h4>
<el-button @click="mutaChagnenamef()">mutaChagnenamef</el-button>
查看到的结果name={{name}}
<hr>
<el-button @click="mutaChagnename()">mutaChagnename</el-button>
查看到的结果name={{name}}
<hr>
<el-button @click="mutaChagneall()">mutaChagneall</el-button>
查看到的结果allinfo={{allInfo}}
<hr>
<el-button @click="mutaChagneagef(24)">
mutaChagneagef
</el-button>
查看到的结果age{{age}}
<hr>
<h4>actions</h4>
<el-button @click="getAge(25)">
getAge
</el-button>
查看到的结果getAge:{{getAge}}
<h4>getters</h4>
查看到的结果getAge: {{$store.getters.getAge}}
查看到的结果getAge: {{computHeight}}
查看到的结果getAge: {{getAge}} //结果将会是一样的
</div>
//文章编辑无法识别template我就把它放在这里了哈，这是结束
import { mapMutations , mapState } from 'vuex'
export default {
computed: {
// 共有三种写法
// 方法01
thisName () {
return this.$store.state.name //得到答案 awei man
},
// 方法02（最常用）
...mapState(['name','sex] ) //得到答案 awei man
// 方法03
...mapState({ name: state => state.name ;sex: state => state.sex ;})
//得到答案 awei man
// 01 getters
...mapGetters(
['height']
),
// 02 getters 重新命名
...mapGetters(
{ computHeight:'height' }
},
methods: {
// 方法01
mutaChagnenamef () {
this.$store.commit('mutaChagnename') // 执行此函数会得到 name=awei liu
},
// 方法02 获取所有方法
...mapMutations(
['mutaChagnename', 'mutaChagneall', 'mutaChagneage'] //这里获取到你要使用的方法。在div里面可以直接使用，例如@click='mutaChagnename'
),
// 这里可以给这些方法重新命名，乳下：
...mapMutations(
{change01:'mutaChagnename',change02: 'mutaChagneall', change03:'mutaChagneage'}
),
//使用方法，例如@click='change01()'
// 方法03
mutaChagneagef (agef) {
this.$store.commit('mutaChagneage',agef)
},
},
// 01 action方法
...mapActions(
['getAge']
),
// 02
getAgef(value) {
this.$store.dispatch('getAge',{value})
}
}
</script>
mapGetters代码解释：
- mapGetters 同样注意大小写；
- 放在computer里面，就可以直接获得到（白话文解释一下：computHeight 就是得到的值）；
module
一般会在大型项目中使用，一般情况下用不到。简单个人理解，就是分模块，每个模块拥有自己的state、mutation、action、getter。
以下是官网的栗子：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
总结
vue学习的时候，要一点点的学，并且要自己敲代码，不懂得就百度，多多百度。像我这样的小白，就要反复琢磨每一行代码。学习一定要不耻下问，接受别人的指责批评。
以上不对的地方，欢迎指正。喜欢的可以相互促进学习。本人邮箱（同QQ）106387911@qq.com
最后再废话几句：
vuex 就是一个公共管理数据的地方，这些数据的管理需要用vuex提供的方法修改，且不可自己创作奥，在模版中管理数据会比较繁琐，这样他的作用就很明显了。学好工具，利用好工具，就像是人类的进步。加油！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
