一. Vuer
二. Vuex配置步骤
1. 新项目使用
在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了
2. 旧项目使用
2.1 安装
进入项目目录，安装包 npm install vuex
2.2 配置
(1). 创建Vuex.store实例
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 当做插件使用
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
(2). 向Vue实例注入store
import store from './store'
new Vue({
store //注入Vue实例
})
1.3 在组件中使用store
this.$store.state
三. Vuex五大核心
1. state (保存数据)
1.1 定义数据
new Vuex.store({
state: {
// 属性名： 属性值
name: 'tom'，
skills: ['抖音', 'B站', '美团']
}
})
1.2 使用数据
(1) 在组件中
this.$store.state.name
(2) 在模板中
{{$store.state.skills[0]}}
1.3 小结
(1) state是响应式的
(2) 定义之后可以在任何组件使用
2. mutations (修改数据)
2.1 注册
new Vue.store({
// 提供方法修改数据
// 数据不应该在组件内部直接修改，必须在组件内调用mutations来修改
mutations：{
// 定义一个mutation来把state中保存的数据改成指定的值
mutation名：function(state , 载荷) {
},
// 如果是复杂数据则放在对象中去传
mutation名：function(state , { 载荷 }) {
}
}
})
每一项都是一个函数，可以申明两个形参：
- 第一个参数是必须的，表示当前的state，
- 第二个参数是可选的，表示载荷(在执行函数时要传入的数据)
2.2 提交
this.$store.commit('mutation名', 载荷)
3. getters (store的计算属性)
3.1 作用
getters是从 store 中的 state 中派生出的新状态，作用是从已有功能数据项中派生出新的数据项
3.2 定义
new Vuex.store({
getters: {
getter的名字: function(state) {
return 要返回的值
}
}
})
3.3 使用
$store.getters.getter名
4. actions (异步请求)
4.1 作用
我们可以使用Action来修改state，这一点是类似于 mutation的，不同在于：
- action中可以通过调用 mutation来修改state，而不是直接变更状态。
- action 可以包含任意异步(例如ajax请求)操作
4.2 定义
new Vuex.store({
// 省略其他...
actions: {
// context对象会自动传入，它与store示例具有相同的方法和对象
action的名字: function(context, 载荷) {
// 1. 发异步请求, 请求数据
// 2. commit调用mutation来修改/保存数据
// context.commit('mutation名', 载荷)
}
}
})
4.3 调用
this.$store.dispatch('actions的名字', 参数)
4.4 小结
将ajax请求放在actions中有两个好处：
- 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。
- 逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。
5. modules (模块拆分)
5.1 格式
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
模块名： {
// 这个为true，则在使用mutations时，就必须要加上模块名
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}
}
})
5.2 使用模块拆分之后的
(1)state
{{$store.state.模块名.数据项名}}
(2)getters
{{$store.getters['模块名/getters名']}}
(3)mutations/actions
namespaced为true
$store.commit('模块名/mutations名')
namespaced为false
$store.commit('mutations名')
5.3 结构优化
Vuex-辅助函数mapState来使用公共数据
格式
// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
// es6 按需导入 import { mapState } from 'vuex'
import { mapState } from 'vuex'
computed: {
// ...对象， 把对象展开，合并到computed
// ['数据项1'， '数据项2']
...mapState(['books'])
}
示例
// 步骤
// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
// es6 按需导入 import { mapState } from 'vuex'
import { mapState } from 'vuex'
// 2. 在computed中使用 ...mapState(['books'])
// const res = mapState(['books'])
// res的结果是一个对象： { books: function() {}}
// console.log('mapState', res)
export default {
computed: {
c1 () {
return 'c1'
},
// books: function() {}
// ..res： 把res这个对象合并到computed对象中
// ...res
...mapState(['books'])
}
}
</script>
Vuex-map函数用法汇总
使用全局state
直接使用
this.$store.state
map辅助函数
computed: {
...mapState(['xxx']),
...mapState({'新名字': 'xxx'})
}
使用modules中的state
直接使用
this.$store.state.模块名.xxx
map辅助函数
computed: {
...mapState('模块名', ['xxx']),
...mapState('模块名', {'新名字': 'xxx'})
}
使用全局getters
直接使用
this.$store.getters.xxx
map辅助函数
computed: {
...mapGetters(['xxx']),
...mapGetters({'新名字': 'xxx'})
}
使用modules中的getters
直接使用
this.$store.getters.模块名.xxx
map辅助函数
computed: {
...mapGetters('模块名', ['xxx']),
...mapGetters('模块名',{'新名字': 'xxx'})
}
使用全局mutations
直接使用
this.$store.commit('mutation名', 参数)
map辅助函数
methods: {
...mapMutations(['mutation名']),
...mapMutations({'新名字': 'mutation名'})
}
使用modules中的mutations（namespaced:true）
直接使用
this.$store.commit('模块名/mutation名', 参数)
map辅助函数
methods: {
...mapMutations('模块名', ['xxx']),
...mapMutations('模块名',{'新名字': 'xxx'})
}
使用全局actions
直接使用
this.$store.dispatch('action名', 参数)
map辅助函数
methods: {
...mapActions(['mutation名']),
...mapActions({'新名字': 'mutation名'})
}
使用modules中的actions（namespaced:true）
直接使用
this.$store.dispatch('模块名/action名', 参数)
map辅助函数
methods: {
...mapActions('模块名', ['xxx']),
...mapActions('模块名',{'新名字': 'xxx'})
}
