vuex状态管理

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模块使用

1. 创建menu.js文件

const menu = {
   state: {
      routeData:'阿发打发第三方'
   },
   mutations: {
      routeData: (state, val) => {
         state.routeData = val
      }
   },
   actions: {
      setRouteData (context, val){
         context.commit('routeData', val)
      },
   }
}
export default menu

2. 在store文件中的index.js文件中

import menu from './menu' // 引入modules文件
import { createStore } from 'vuex'
export default createStore({
   state: {},
   getters:{},
   mutations:{},
   actions:{},
   modules:{ menu }
})

3. 获取：store.state.menu.routeData

待续。。。