<!doctype html>vuex的使用方法
vuex的使用
vue全家桶：vue + vue-router + vuex
1.引入vuex
- store/index.js文件
x
import Vue from 'vue'
import Vuex from 'vuex'
// 引入模块
import user from '@/store/modules/user.js'
Vue.use(Vuex)
export default new Vuex({
state:{
userInfo：{}
},
mutations:{
getUserInfo(state,data){
state.userInfo = data
}
},
actions:{
},
getters:{
},
modules:{
user
}
})
- store/modules/user.js
xxxxxxxxxx
const user = {
state:{
userInfo：{}
},
mutations:{
getUserInfo(state,data){
state.userInfo = data
}
},
actions:{
}
}
export default user
2.state的用法
state内储存组件共享的状态
获取vuex中的数据方式：
- 直接获取（组件内），在组件的任何地方可以直接使用
xxxxxxxxxx
// 在计算属性中获取
computed:{
userInfo(){
// 不分模块时获取方式
return this.$store.state.userInfo
// 分模块时获取方式
return this.$store.state.user.userInfo
}
}
- 辅助函数mapstate
xxxxxxxxxx
import {mapState} from 'vuex'
// 1.不分模块获取
// 1.1 不考虑组件有其他计算属性时
// 辅助函数的参数时一个数组或者对象
// 1.1.1 参数是数组时：
computed:mapState(['userInfo']) // 在组件使用的时候，数据属性名为userInfo
// 1.1.2 参数时对象时，给获得的数据重新命名
computed:mapState({
user:'userInfo'
// 在组件使用的时候，数据属性名为user
})
// 1.2 组件有其他计算属性时
computed:{
mapState(['userInfo'])
sum(){
return num1 + num2
}
}
// 2. 分模块获取
// ...mapState('模块名'，['state中的数据属性'])
computed:{
mapState('user',['userInfo'])
sum(){
return num1 + num2
}
}
3.mutations的用法
mutitions用来修改state的状态，只能通过mutations来修改state的状态
mutations的用法：通过提交来触发mutations中的方法，进而修改state
xxxxxxxxxx
mutations:{
getUserInfo(state,data){
state.userInfo = data
}
}
// 在mutations中定义的方法，参数含义：
// 第一个参数state：指的是当前vuex实例中的state
// 第二个参数data：提交时传递过来的参数
- 直接在组件内提交
xxxxxxxxxx
// 不分模块提交
this.$store.commit('getUserInfo',data)
// 第一个参数：提交的事件名
// 第二个参数：传递给提交事件的参数
// 分模块提交
this.$store.commit('user/getUserInfo',data)
- mapMutations辅助函数提交
xxxxxxxxxx
import { mapMutations } from 'vuex'
created:{
this.getUserInfo()
}
// 用法1：
methods:mapMutations(['getUserInfo']) // 使用：this.getUserInfo
// 用法2：
methods:mapMutations({
user:'getUserInfo' // 将提交的事件名修改为user this.user
})
// 用法3：
methods:{
mapMutations(['getUserInfo'])
mapMutations({
user:'getUserInfo' // 将提交的事件名修改为user this.user
})
}
// 用法4：分模块
methods:{
mapMutations('user',['getUserInfo'])
// 第一个参数为一个字符串，代表模块名称
// 第二个参数为一个数组或者对象，写提交的事件名
}
4.actions的用法
actions用来写修改state时的异步代码
actions的用法：通过dispatch分发来触发mutations的提交事件，进而修改state
xxxxxxxxxx
actions:{
async getAsyncUserInfo(contex,data){
const res = await reqGetUserInfo() // 异步请求
contex.commit('getUserInfo',res.data)
// 参数contex：actions中的state实例
// 参数data,组件传递给actions的参数
}
}
- 直接使用方式
xxxxxxxxxx
// 不分模块
this.$store.dispatch('getAsyncUserInfo',data)
// 第一个参数：分发actions内部的事件名
// 第二个参数：传递给actions的数据
// 分模块
this.$store.dispatch('user/getAsyncUserInfo',data)
- mapActions辅助函数的使用
xxxxxxxxxx
import { mapActions } from 'vuex'
created:{
this.getAsyncUserInfo()
}
// 用法1：
methods:mapActions(['getAsyncUserInfo']) // 使用：this.getAsyncUserInfo
// 用法2：
methods:mapActions({
user:'getAsyncUserInfo' // 将提交的事件名修改为user this.user
})
// 用法3：
methods:{
mapActions(['getAsyncUserInfo'])
mapActions({
user:'getAsyncUserInfo' // 将提交的事件名修改为user this.user
})
}
// 用法4：分模块
methods:{
mapActions('user',['getAsyncUserInfo'])
// 第一个参数为一个字符串，代表模块名称
// 第二个参数为一个数组或者对象，写提交的事件名
}
5.getters的用法
getters用来对state中的数据进行进一步的处理，相当于store中的计算属性
getter的用法：和state一样通过属性访问
xxxxxxxxxx
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
})
- 直接使用
xxxxxxxxxx
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
},
doneTodos(){
return this.$store.getters.doneTodos
}
}
- mapGetters辅助函数使用
xxxxxxxxxx
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
}