初始化文件夹
indedx.js
// vuex的使用步骤
// 1. 下载 yarn add vuex -S / npm i vuex - S
// 2. 导入
// 何时需要些相对路径: 自己写的文件(非node_modules中的)
// 何时直接写包名：node的内置模块或者yarn/npm下载的第三方包
// 3. 注册
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)// 会给组件添加 $store $route $router
// 4. 创建store对象
const store = new Vuex.Store({
// 4.1 state - 存储共享的数据源 - 类似data函数
state: {
num: 100
},
// 4.2 mutations - 唯一 同步 修改的 state的 数据操作员 , 本质就是函数
mutations: {
addNum (state, val = 1) {
// state.num = state.num + val
state.num += val
},
subNum (state, val = 1) {
state.num -= val
},
setNum (state, val) {
state.num = val
}
},
// 4.3 actions - 异步修改state，但是 最终还是需要 commit 到 mutations中 , 本质也是函数
actions: {
asyncAddNum (store, val = 1) {
setTimeout(() => {
store.commit('addNum', val)
}, 2000)
},
asyncSubNum (store, val = 1) {
setTimeout(() => {
store.commit('subNum', val)
}, 2000)
}
}
})
// 5. 导出
export default store // 给 main.js 使用
Addltem.vue
<template>
<div>
<h3>AddItem组件</h3>
<p>已知库存数: {{ $store.state.num }}</p>
<button @click="addFn">库存+1</button>
<button @click="asyncAddNumFn">延迟2秒，库存+5</button>
</div>
</template>
<script>
export default {
name: 'AddItem',
methods: {
addFn () {
this.$store.commit('addNum')
},
asyncAddNumFn () {
this.$store.dispatch('asyncAddNum', 5)
}
}
}
</script>
SubItem.vue
<template>
<div>
<h3>SubItem组件</h3>
<p>已知库存数: {{ num }}</p>
<p>{{ age }}</p>
<button @click="subFn">库存-1</button>
<button @click="asyncSubNumFn">延迟2秒，库存-5</button>
</div>
</template>
<script>
// 目标：映射使用 state
// 1、 从 vuex 中 按需导入 相应的 辅助函数 mapState
// 2. 把vuex - state 数据源 映射到当前组件的 computed 中
// 目标：映射 使用 mutations
// 1. 从 vuex 中 按需导入 相应的 辅助函数 mapMutations
// 2. 把vuex - mutations函数 映射到当前组件的 methods 中
import { mapState, mapMutations, mapActions } from 'vuex'
/*
console.log(mapState(['num']))
{
num(){
return 100
}
}
*/
export default {
name: 'SubItem',
computed: {
// 把mapState返回的对象解开（
// 把返回的对象的键值对取出来卸载到computed中）
...mapState(['num', 'age'])
},
methods: {
...mapMutations(['subNum']),
...mapActions(['asyncSubNum']),
subFn () {
this.subNum()
},
asyncSubNumFn () {
this.asyncSubNum(5)
}
}
}
</script>
App.vue
<template>
<div id="app">
<h1>根组件</h1>
<span>库存总数:</span>
<!-- <input type="text" v-model="$store.state.num"> -->
<input type="text" :value="num" @input="inputFn">
<!-- v-model = v-bind + v-on -->
<div style="border:1px solid black; width: 300px;">
<AddItem/>
</div>
<hr>
<div style="border:1px solid black; width: 300px;">
<SubItem/>
</div>
</div>
</template>
<script>
import AddItem from './components/AddItem'
import SubItem from './components/SubItem'
import { mapState, mapMutations } from 'vuex'
export default {
name: 'App',
computed: {
/* mapState两种传参数区别
1. 数组：不能对state中变量重命名
2. 对象：可以对state中变量重命名，
属性名是留在原地的计算属性的名字，
属性值是要映射的state数据变量的名字
*/
...mapState(['num'])
// ...mapState({
// a: 'num'
// })
},
components: {
AddItem,
SubItem
},
methods: {
...mapMutations(['setNum']),
inputFn (e) {
// this.$store.commit('setNum', +e.target.value)
this.setNum(+e.target.value)
}
}
}
</script>
<style>
#app {
width: 300px;
margin: 20px auto;
border:1px solid #ccc;
padding:4px;
}
</style>
语法总结:
使用state :方式方式1: 组件内 - 直接使用
this.$store.state.变量名
方式2: 组件内 - 映射使用 (推荐)
// 1. 拿到mapState辅助函数
import { mapState } from 'vuex'
export default {
computed: {
// 2. 把state里变量映射到计算属性中
...mapState(['state里的变量名'])
}
}
使用mutations :方式方式1: 组件内 - 直接使用
this.$store.commit("mutations里的函数名", 具体值)
方式2: 组件内 - 映射使用 (推荐)
// 1. 拿到mapMutations辅助函数
import { mapMutations } from 'vuex'
export default {
methods: {
// 2. 把mutations里方法映射到原地
...mapMutations(['mutations里的函数名'])
}
}
使用actions :方式方式1: 组件内 - 直接使用
this.$store.dispatch('actions函数名', 具体值)
方式2: 组件内 - 映射使用 (推荐)
// 1. 拿到mapActions辅助函数
import { mapActions } from 'vuex'
export default {
methods: {
// 2. 把actions里方法映射到原地
...mapActions(['actions里的函数名'])
}
}
总结
-
state、getters 都是 映射 在 组件 的 computed 中
-
mutations、actions 都是 映射 在 组件 的 methods 中
-
mutations 和 actions的区别
相同点：本质 都是 函数、
不同点：
- mutations: 唯一 并且 同步 修改 state的
- actions： 异步 修改 state的、但它不能直接改，最终 必须 commit 到 mutations 上
- 第一个形参的区别：mutations 第一个 形参 是
state，actions 第一个 形参 是store
-
何时需要使用vuex？
? 多个组件需要 共享 数据 的时候，如果组件是 父子关系， 用 父传子 或 子传父