vuex.总结

10.1 vuex

10.1.1 安装vuex

yarn add store@3.6.2

在src下建store文件和index.js

在index.js中

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

strict: true,

state: {

num: 10,

},

mutations: {

num(state, data) {

state.num += data

},

},

})

export default store

在main.js中

导入

import Store from '@/store'

Vue.use({

Store})

10.1.2 获取参数

获取页面参数

第一种

$store.state.xx

第二种

...mapState(['xx'])

10.1.3 修改参数

开启严格模式

strict:true

必须在严格模式下

10.1.3.1 第一种方式

@click='$store.commit(函数名,'值')'

mutations:{

函数名:(state,data){

state.num+=data

}

}

10.1.3.2 第二种方式

import {maoMutations} from 'vuex'

10.1.4 异步修改数据

也要开启严格模式

异步修改不能直接在函数中写表达式,要调用同步中的函数,进行修改.

也可以定时器,进行延时.

actions:{

changnum(store,data){

context.commit('changnum',data)

加定时器

函数名(context, data) {

setTimeout(() => { context.commit('num', data)

}, 1000)

},

}

}

函数

@click='$store.dispatch('changnum',值)'

10.1.4.1 第一种方式

直接调用函数

$store.dispatch('fn',data)

10.1.4.2 第二种方式

import {mapActions} from 'vuex'

methods:{

...mapActions(['函数'])

}

10.1.5 建立快捷访问方式

10.1.5.1 第一种方式

getters:{

userName(state){

return state.userinfo.username

}

age:(state)=>state.userinfo.detail.age

}

调用:

{{$store.getters.userName}}

{{$store.getters.age}}

10.1.5.2 第二种方式

import {mapGetters} from 'vuex'

computed:{

...mapGetters(['username','age','sex'])

}

调用,直接调用即可

{{username}},{{sex}}