Vuex4.0版本初学笔记(基于Vue3.0)
- devtools 离线编译安装
1、源码下载地址
2、yarn install安装依赖yarn run build编译
3、在chrom中打开开发者模式,点击“加载已解压的扩展程序”,选择源码目录packages/shell-chrome/
- Vuex的基础使用
1、创建store
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
counter: 10
}
},
mutations: {
increment (state) {
console.log(state);
state.counter++
}
},
getters: {
},
actions: {
},
modules: {
}
});
2、挂载使用store
import store from './store'
createApp(App).use(store).mount('#app')
3、组件中使用store中的数据
import { mapState, useStore } from "vuex";
import { computed } from "vue";
export default {
setup() {
const store = useStore();
console.log('setup - ', store.state.counter);
const add = () => {
store.commit('increment')
}
// setup - computed
const setupCounter = computed(() => store.state.counter)
return {
add,
setupCounter
}
},
methods: {
addMethod() {
this.$store.commit('increment');
}
},
// computed中使用store中的数据 第一种方法
// computed: {
// computedCounter() {
// return this.$store.state.counter;
// }
// }
// 第二种方法
// computed: mapState({
// computedCounter: state => state.counter,
// })
// 第三种方法
// computed: mapState(['counter'])
computed: {
computedCounter() {
return this.$store.state.counter;
},
...mapState(['counter'])
}
}
- gatters的创建以及使用
// 定义的gatter函数
getters: {
getterDemo(state) {
console.log('gettter', state.counter);
return state.counter * 2;
},
// getter调用其他getter方法
getterDemo1(state, getters) {
return `getterDemo1 - ` + getters.getterDemo;
},
// 返回函数
getterDemofun(state) {
return (number) => {
return number * state.counter;
};
}
}
// 模板中使用getter方法
<div>getterDemo - {{$store.getters.getterDemo}}</div>
<div>getterDemo1 - {{$store.getters.getterDemo1}}</div>
<div>getterDemofun - {{$store.getters.getterDemofun(3)}}</div>
// computed中使用
<div>getterDemo - {{getterDemo}}</div>
<div>getterDemo1 - {{getterDemo1}}</div>
<div>getterDemofun - {{getterDemofun(3)}}</div>
<div>getterDemoAlias - {{getterDemoAlias}}</div>
<div>getterDemoAlias1 - {{getterDemo1Alias}}</div>
<div>getterDemofunAlias - {{getterDemofunAlias(3)}}</div>
computed: {
...mapGetters(['getterDemo', 'getterDemo1', 'getterDemofun']),
...mapGetters({
getterDemoAlias: 'getterDemo',
getterDemo1Alias: 'getterDemo1',
getterDemofunAlias: 'getterDemofun',
})
}
- mutations的创建以及使用
mutations必须是同步函数,devtool会记录mutation的状态。
// mutation-types.js 定义常量
export const SOME_MUTATION = 'SOME_MUTATION';
// 定义mutations函数
import { SOME_MUTATION } from './mutation-types'
mutations: {
increment(state) {
console.log(state);
},
// param参数,可以是对象
add(state, param) {
console.log('add - ', param);
},
[SOME_MUTATION](state, param) {
console.log('SOME_MUTATION', param);
}
},
// 基础使用
import { SOME_MUTATION } from '../../store/mutation-types'
methods: {
addMethod() {
// 基础使用传递参数
this.$store.commit('add', 8);
this.$store.commit(SOME_MUTATION);
// 传递对象参数
this.$store.commit('add', {
name: 'zandan'
});
},
}
// 模板中直接提交commit
<button @click="$store.commit('increment')">直接提条</button>
// method中使用mapMutations映射
methods: {
...mapMutations(['increment', SOME_MUTATION]),
...mapMutations({
addAlias: 'add'
})
},
// setup中映射
setup() {
return {
...mapMutations(['increment', SOME_MUTATION]),
...mapMutations({
addAlias: 'add'
})
}
},
<button @click="increment">increment</button>
<button @click="addAlias({name: 'sss'})">addAlias</button>
<button @click="SOME_MUTATION(4)">SOME_MUTATION</button>
- actions的使用
Action提交的是mutation,而不是直接修改状态,Action可以包含任意异步操作。
Action还有一个context参数。context是一个和store实例均有相同方法和属性的context对象;
所以可以从其中获取到commit方法来提交一个mutation,或者通过context.state和context.getters来获取state和getters;
// 基本使用
actions: {
actionDemo(context) {
// context = commit/dispatch/getters/rootGetters/rootState/state
console.log('actionDemo', context);
context.commit("increment");
}
},
<div>模板中获取值:{{$store.state.counter}}</div>
<button @click="addMethod">action提交</button>
<button @click="actionDemo">actionDemo</button>
<button @click="addAction">addAction</button>
<button @click="setupAction">setupAction</button>
import { mapActions } from "vuex"
export default {
setup() {
return {
...mapActions({
setupAction: 'actionDemo'
})
}
},
methods: {
addMethod() {
this.$store.dispatch('actionDemo')
},
...mapActions(['actionDemo']),
...mapActions({
addAction: 'actionDemo'
}),
}
}
- module的使用
基本使用
// homeModule.js
export default {
namespaced: true,
state() {
return {
title: "home"
}
},
mutations: {
},
getters: {
},
actions: {
}
}
// mineModuele.js
export default {
namespaced: true,
state() {
return {
title: "mine"
}
},
mutations: {
},
getters: {
},
actions: {
}
}
// rootModule.js
import { createStore } from 'vuex'
import home from './homeModule'
import mine from './mineModule'
const store = createStore({
state() {
return {
counter: 10,
title: 'root'
}
},
mutations: {
},
getters: {
},
actions: {
},
modules: {
home,
mine
}
});
export default store;
// state数据的获取
<div>模板中获取值:{{$store.state.title}}</div>
<div>模板中获取值:{{$store.state.home.title}}</div>
<div>模板中获取值:{{$store.state.mine.title}}</div>
<div>模板中获取值:{{homeTitle}}</div>
computed: {
homeTitle() {
return this.$store.state.mine.title;
}
}
多个module中使用getter和actions
export default {
namespaced: true,
state() {
return {
title: "home"
}
},
mutations: {
changeTitle(state) {
console.log(state);
}
},
getters: {
// getterTitle(state, getters, rootState, rootGetters)
getterTitle(state) {
return state.title + " getter"
},
},
actions: {
// context = {commit, dispatch, state, rootState, getters, rootGetters}
changeTitleAction(context) {
context.commit('changeTitle');
// 派发root module中的mutations
context.commit('changeTitle', null, {root: true});
}
}
}
// 模板
<button @click="changeTitle">changeTitle</button>
<div>{{$store.getters["home/getterTitle"]}}</div>
methods: {
changeTitle() {
this.$store.dispatch('home/changeTitleAction');
}
}
// 在助手函数中的使用
<div>模板中获取值 - mapTitle:{{mapTitle}}</div>
<div>模板中获取值 - mapTitleHome: {{mapTitleHome}}</div>
<button @click="changeTitleAction">map changeTitle</button>
<button @click="homeObject">map homeObject</button>
import { mapState, mapActions } from "vuex";
export default {
setup() {
return {
}
},
methods: {
...mapActions('home', ['changeTitleAction']),
...mapActions('home', {
homeObject: 'changeTitleAction'
})
},
computed: {
homeTitle() {
return this.$store.state.mine.title;
},
...mapState({
mapTitle: state => state.home.title
}),
...mapState("home", {
mapTitleHome: state => state.title
})
}
}
// 利用createNamespacedHelpers导出使用
import { createNamespacedHelpers } from "vuex";
const {mapActions, mapState} = createNamespacedHelpers("home");
export default {
setup() {
return {
}
},
methods: {
...mapActions(['changeTitleAction']),
...mapActions({
homeObject: 'changeTitleAction'
})
},
computed: {
...mapState({
mapTitle: state => state.title
}),
...mapState( {
mapTitleHome: state => state.title
})
}
}