vuex的使用

概念

状态管理器，存取数据用的,可以跨组件通信（屏蔽了组件的父子关系）

定义store

//store/index.js
import { createStore } from "vuex";
const store = createStore({
state:{
    // 存数据的地方
    count:0
},
mutations:{
    JIA(state,value){
        state.count+=value
    }
},
actions:{
    jia(context,value){
        // context 上下文
        // value 组件中调用时，传入的值
        // 判断是否有权限改请求一下后端接口，获取了，有权限，
        context.commit('JIA',value)
    }
}

})
export default store

注册

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

取值

this.$store.state.count

修改数据

this.$store.dispatch("actions中定义的函数",参数)
它就会触发  actions中定义的函数  的执行，内部执行了 context.commit('JIA', value)
它又会触发  mutations中定义的函数执行，内部对sum进行了修改

或
this.$store.commit('JIA',2)

实战

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    // 从localStorage读取
    user:localStorage.getItem('user'),
    token:localStorage.getItem('token')
  },
  getters: {
  },
  mutations: {
    login(state,{username,token}){
      state.user=username
      state.token=token
      // 存到localStorage 持久化
      localStorage.setItem("user",username)
      localStorage.setItem("token",token)
    },
    logout(state){
      state.user=null
      state.token=null
      // 存到localStorage 持久化
      localStorage.removeItem("user")
      localStorage.removeItem("token")
    }


  },
  actions: {
  },
  modules: {
  }
})

loginView.vue

<template>
  <div class="about">
    <input type="text" name="" id="" v-model="username">
    <input type="password" name="" id="" v-model="password">
    <input type="button" value="click" @click="doClick">
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
import {ref} from "vue";
import {useStore} from 'vuex'
const router = useRouter()
const username = ref('')
const password = ref('')
const store = useStore()
const doClick = ()=>{
  if (username.value.length>0&&password.value.length>0){
    const res = {username:username.value,token:password.value}
    store.commit('login',res)
    router.replace({name:'Home'})
  }else{
    console.log('error')
  }
 }
</script>

HomeView.vue

<template>
      <div v-if="name" @click="doLogout">{{name}}</div>
      <router-link  to="/login" v-else>登陆</router-link>
</template>

<script setup>
  import {useStore} from "vuex";
  import {ref} from "vue";

  const store = useStore()
  const name = ref(store.state.user)
    const doLogout=()=>{
    store.commit('logout')
    router.push({name:'Login'})
  }
</script>