vuex是什么
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
1. state
- 存state相当于组件中的data 专门用来存放全局的数据
state: {
//state 储存数据
content:0
},
2. mutation
- 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
- 相当于组件中的methods 但是它不能使用异步方法（定时器，axios）
小案例：
vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//state 储存数据
content:0
},
mutations: {
// 修改state的数据
increment(state) {
state.content +=1
},
decrement(state) {
state.content -=1
}
},
actions: {
},
modules: {
}
})
app.vue
<template>
<div id="app">
<h1> {
{
content}}</h1>
<button @click="add"> + </button>
<button @click="del"> - </button>
</div>
</template>
<script>
import {
mapMutations, mapState } from 'vuex' //将把vuex的mutations mapStat e引入进来
export default {
data() {
return{
msg: 'wetcome to Your Vue.js App'
}
},
methods: {
...mapMutations(['increment','decrement']), //把vuexmutation 里面的函数放入数组中并且应用到。。。
add() {
this.increment() //应用vuexmutation De increment
//this.$store.commit('increment') //和上面意思一样
},
del() {
this.decrement()//应用vuex mutation的 decrement
//this.$store.commit('decrement') //和上面意思一样
}
},
computed: {
...mapState( ['content'] ) //使用vuex state 里面储存的数据
}
}
3. actions
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作
重复上面的小案例：
vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//state 储存数据
content:0
},
mutations: {
// 修改state的数据
increment(state) {
state.content +=1
},
decrement(state) {
state.content -=1
}
},
actions: {
//调用 mutation
myincrement(context) {
context.commit('increment')
},
mydecrement(context) {
context.commit('decrement')
},
},
modules: {
}
})
app.vue
const products = [1,2,3,4,5] // await axios.get(…)
return products
<template>
<div id="app">
<h1> {
{
content}}</h1>
<button @click="add"> + </button>
<button @click="del"> - </button>
</div>
</template>
<script>
import {
mapActions, mapMutations, mapState } from 'vuex' //将把vuex的mutations mapStat e引入进来
import {
mapActions, mapMutations, mapState } from 'vuex' //将把vuex的Actions 引入进来
export default {
data() {
return{
msg: 'wetcome to Your Vue.js App'
}
},
methods: {
...mapMutations(['increment','decrement']), //把vuexmutation 里面的函数放入数组中并且应用到。。。
add() {
this.myincrement() //应用vuexaction 的 myincrement
},
del() {
this.mydecrement() //应用vuexaction 的 mydecrement
}
},
computed: {
...mapState( ['content'] ) //使用vuex state 里面储存的数据
}
}
4.geeters
- Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
- 相当于组件中的computed getters事全局的 computed事组件内部使用的
vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//state 储存数据
content:0
},
getters: {
mycontent(state) {
return 'content is '+ state.content
}
},
mutations: {
// 修改state的数据
increment(state) {
state.content +=1
},
decrement(state) {
state.content -=1
}
},
actions: {
//调用 mutation
myincrement(context) {
context.commit('increment')
},
mydecrement(context) {
context.commit('decrement')
},
},
})
app
<template>
<div id="app">
<h1> {
{
content}}</h1>
<h2>{
{
doneCount}}</h2>
<h3>{
{
doneCount}}</h3> <!-- //修改名字后 -->
<button @click="add"> + </button>
<button @click="del"> - </button>
</div>
</template>
<script>
import {
mapActions, mapState, mapGetters} from 'vuex' //将把vuex的mapGetters,mutations mapStat e引入进来
export default {
data() {
return{
}
},
methods: {
...mapActions(['myincrement','mydecrement']),
add() {
this.myincrement() //应用vuexmutation De increment
},
del() {
this.mydecrement()//应用vuex mutation的 decrement
}
},
computed: {
...mapState( ['content'] ) ,//使用vuex state 里面储存的数据,
...mapGetters(['mycontent']),
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.mycontent`
doneCount: 'mycontent'
})
}
}
</script>
<style>
.omargin {
margin: 0 10px;
}
</style>
5.modules
vuex拆分写法
新建文件同等与index.js文件目录 state.js mutation.js 。。。。。
vuex
js文件 把对应的内容都填写在文件中
完事后 你会发现 代码可以正常使用