1.vuex是什么？
1-1 vuex可以理解为公共仓库，我们可以把公共的数据，方法放到里面，所有的组件都可以调取
其数据和方法
1-2 但是vuex的数据一刷新就没了，我们可以用本地存储的方式vuex数据改变的状态
2.vuex的属性有哪些？
. state
存放公共的数据
.mutations
存放一些方法，这些方法可以用来改变state的数据， 如果我们想要改变state的数据，需要用mutations的方法 vuex提供了commit()方法 ，mutations是同步执行
.actions
我们上次说mutations的方法是同步执行的，如果想把处理数据的方法改成处理异步方法，需要用actions,简单说是异步操作数据，但是还是得通过mutations来操作，因为actions不能直接改变state的数据 vuex提供了dispath()方法
.getters
比如我们想对Store仓库的state数据进行过滤，二次封装，一般的话可以写在computed里，但是如果好几个组件都用到这个过滤后的数据，我们可以在getter里对这个数据直接封装，这样数据数据可以共享，可以理解为store的计算属性
modules
我们在做项目的时候有很多模块功能，每个某块都子的state,mutions,actions,getters,为了更好的管理实现模块化
3.那我们该如何在vue3的项目创建vuex以及使用vuex
3-1 安装vuex
cnpm i vuex@next -S;
3-2 创建一个strore文件里，并创建一个index.js文件
import {createStore} from 'vuex'
import user from './user/user.js'
export default createStore({
state:{
name:'全局的name'
},
mutations:{
change(state,value){
state.name=value
}
},
actions:{
change(context,value){
context.commit('change',value)
}
},
getters:{
newname:(state)=>{
return state.name
}
},
modules: {
user
}
})
3-3创建子模块
export default {
namespaced: true,
state: {
name:'I,m is a userName'
},
mutations: {
change(state,value){
state.name=value
}
},
getters:{
name:(state)=>{
return state.name
},
newname(state, getters) {
return getters.name
}
},
actions: {
change(context,value){
context.commit('change',value)
}
}
}
3-3 入口文件的调用
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')
3-4 在组件里的使用
3-4-1:需要引进useStrore
const store=useStore();
3-4-2:模块化的mutations方法的调用
store.commit('user/change',value);
3-4-3:非模块化mutations方法调用
store.commit('change',value);
3-4-4：模块化的actions方法的调用
store.dispatch('user/change',value);
3-4-5:非模块化mutations方法调用
store.dispatch('change',value);
3-4-6：获取模块化的getters的方法
let userName=computed(()=>{
return store.getters['user/newname']
})
3-4-7：获取非模块的getters的方法
let global=computed(()=>{
return store.getters.newname
});
<template>
<p>
{{global}}
<button @click="globalName('222')">mutations改变全局的name</button>
<button @click="chageName('55555')">actions改变全局的name</button>
</p>
<p>
{{userName}}
<button @click="changuserName('3333')">
mutations改变局部的name
</button>
<button @click="changeUser('8888')">
actions改变局部的name
</button>
</p>
</template>
<script>
import {ref,computed} from 'vue'
import {useStore} from 'vuex'
export default{
setup(){
const store=useStore();
let global=computed(()=>{
return store.getters.newname
});
let userName=computed(()=>{
return store.getters['user/newname'];
});
//通过mutations的方法改变数据
let globalName=(value)=>{
store.commit('change',value)
}
//通过mutations的方法改变数据
let changuserName = (value)=>{
store.commit('user/change',value)
}
//通过actions的方法改变数据
let chageName=(value)=>{
store.dispatch('change',value)
}
//通过actions的方法改变数据
let changeUser=(value)=>{
store.dispatch('user/change',value)
}
return{
global,
userName,
globalName,
changuserName ,
chageName,
changeUser
}
}
}
</script>
<style>
</style>
网友评论