vue
1.下载vuex依赖
2.创建store目录store.js,然后在js中引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3.在main.js引入store并挂载
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
4.store.js中
const store = new Vuex.Store({
// * state相当于vue中的data数据,引用方式:
// * 4-1.{{this.$store.state.count}};
// * 4-2.import { mapState } from 'vuex'
// * computed: { ...mapState(['storeInfo']) }, this.storeInfo
state: {
storeInfo: '',
},
// * getters相当于vue中的computed ---实时监听state值的变化,
// * 在getters定义一个监听函数,可以将state的的数据作为参数传递,在函数内进行计算操作,注意需要通过return出去,
// * 页面引用:{{this.$store.getters.getCount}}
getters:{
getCount(state){ return state.storeInfo+'getters' }
},
// * mutations 同步的操作
// * actions 异步的操作
// * 区别:state只能在mutaions里面修改,actions不能直接修改state
// * 4-1.通过dispatch调用actions中的函数:this.$store.dispatch('setHotelInfo', hotelInfo)
// * 4-2.actions中的函数通过第一个参数context引用context.commit('mutations函数名',value)调用mutations中的函数
// * 4-3.mutations中的函数通过第一个参数为state数据中的值,将第二个带参值赋值给state中的值
mutations: {
storeInfo (state, val){
state.storeInfo = val
},
},
actions: {
setStoreInfo (context, val){
context.commit('storeInfo', val)
},
}
})
export default store
vue3中vuex的modules模块使用
// 在store文件中的index.js文件中
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import tagsView from './modules/tagsView'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user,
tagsView,
},
getters // 这个文件为getters,用于实时监听state值的变化,其余都为一个模块state、mutations、actions
})
export default store
vue3
import { createStore } from 'vuex'
export default createStore({
// * 引用:
// * import { useStore } from "vuex";
// * let store = useStore();
// * const allData = reactive({
// * storeInfo:store.state.storeInfo,
// * getCount:store.getters.getCount,
// * })
// * {{ storeInfo }} {{ getCount }}
state: {
storeInfo:1,
},
getters:{
getCount(state){ return state.storeInfo+'getters-computed' }
},
mutations:{
storeInfo (state, val){
state.storeInfo = val
},
},
// * store.dispatch('setStoreInfo' , '存储在vuex中的value值')
actions:{
setStoreInfo (context, val){
context.commit('storeInfo', val)
},
}
})
<el-button @click="handleDispatch"> 按 钮 </el-button>
<script>
import { useStore } from "vuex";
import { useRouter } from 'vue-router'
export default {
name: "index",
setup(){
let store = useStore();
const router = useRouter()
// vuex中的storeInfo初始值为1,当触发此事件再跳转到其他引用了storeInfo的vuex页面时,storeInfo的值被赋值为'获取vuex更新后的值'
let handleDispatch = ()=> {
store.dispatch('setStoreInfo' , '获取vuex更新后的值')
router.push('/vuex')
}
return{
handleDispatch
}
}
}
</script>
{{ storeInfo }}--{{ getCount }}
import { reactive , toRefs } from 'vue'
import { useStore } from "vuex";
export default {
setup(){
let store = useStore();
const allData = reactive({
storeInfo:store.state.storeInfo,
getCount:store.getters.getCount,
})
return{...toRefs(allData)}
}
}
</script>
vue3中vuex的modules模块使用
- 创建menu.js文件
const menu = {
state: {
routeData:'阿发打发第三方'
},
mutations: {
routeData: (state, val) => {
state.routeData = val
}
},
actions: {
setRouteData (context, val){
context.commit('routeData', val)
},
}
}
export default menu
- 在store文件中的index.js文件中
import menu from './menu' // 引入modules文件
import { createStore } from 'vuex'
export default createStore({
state: {},
getters:{},
mutations:{},
actions:{},
modules:{ menu }
})
- 获取:
store.state.menu.routeData
待续。。。