vue-vuex

1 安装

npm install vue-vuex --save
手动创建文件+配置

或

vue add vuex （推荐）

2 案例1（vuex + 存储）

store -> index.js

import {createStore} from 'vuex'

export default createStore({
	state: {
		username: '',
		token: '',
	},
	getters: {},
	mutations: {
		login(state, {username, token}){
			state.username = username;
			state.token = token;
		}
	},
	actions: {},
	modules: {}
})

HomeView.vue

<template>
  <div class="home">
        <div class="menu">
            <div class="container">
                <router-link to="/">源代码教育</router-link>
                <router-link to="/">首页</router-link>
				
                <div style="float: right">
                    <a v-if="name">{{name}}</a>
                    <router-link v-else to="/login">登录</router-link>
                </div>
            </div>
        </div>
        <div class="container">
            <router-view/>
        </div>
  </div>
</template>
<script setup>
    import {ref} from 'vue'
    import {useStore} from "vuex";

    const store = useStore()
    const name = ref(store.state.username)

</script>

LoginView.vue

<template>
    <div style="width: 400px;height: 200px;margin: 100px auto">
        <input type="text" v-model="username">
        <input type="password" v-model="password">
        <input type="button" value="登录" @click="doLogin">
    </div>
</template>

<script setup>
    import {useRouter} from "vue-router";
    import {useStore} from "vuex";
    import {ref} from 'vue'

    const router = useRouter()
    const store = useStore()
    const username = ref('')
    const password = ref('')

    function doLogin() {
        //...
        if (username.value.length>0 && password.value.length>0){
            console.log('登录成果');

            const response = {username: username.value, token: "qwe123", id:100}
            store.commit('login', response)

            router.replace({name: 'Index'});
        }else{
            console.log('登录失败')
        }
    }

</script>

<style scoped>

</style>

看似没有问题，其实不然，当你页面刷新，就又会显示登录二字了。

vuex的数据时存储在内存中，当你页面刷新，就会重新加载了。所有数据丢失。

store -> index.js

import {createStore} from 'vuex'

export default createStore({
	state: {
		username: localStorage.getItem('username'),
		token: localStorage.getItem('token'),
	},
	getters: {},
	mutations: {
		login(state, {username, token}){
			state.username = username;
			state.token = token;
			
			// 保存在localStorage中
			localStorage.setItem('username', username)
			localStorage.setItem('token', token)
		}
	},
	actions: {},
	modules: {}
})

3 案例3（vuex + 导航守卫）

HomeView.vue

<template>
  <div class="home">
        <div class="menu">
            <div class="container">
                <router-link to="/">源代码教育</router-link>
                <router-link to="/">首页</router-link>
                <div style="float: right">
                    <a v-if="name" @click="doLogout">{{name}}</a>
                    <router-link v-else to="/login">登录</router-link>
                </div>
            </div>
        </div>
        <div class="container">
            <router-view/>
        </div>
  </div>
</template>

<script setup>
    import {ref} from 'vue'
    import {useStore} from "vuex";
    import {useRouter} from "vue-router";

    const router = useRouter()
    const store = useStore()
    const name = ref(store.state.username)

    function doLogout(){
        store.commit('logout');
        router.push({name: 'Login'});
    }

</script>

LoginView.vue

<template>
    <div style="width: 400px;height: 200px;margin: 100px auto">
        <input type="text" v-model="username">
        <input type="password" v-model="password">
        <input type="button" value="登录" @click="doLogin">
    </div>
</template>

<script setup>
    import {useRouter} from "vue-router";
    import {useStore} from "vuex";
    import {ref} from 'vue'

    const router = useRouter()
    const store = useStore()
    const username = ref('')
    const password = ref('')

    function doLogin() {
        //...
        if (username.value.length>0 && password.value.length>0){
            console.log('登录成果');

            const response = {username: username.value, token: "qwe123", id:100}
            store.commit('login', response)

            router.replace({name: 'Index'});
        }else{
            console.log('登录失败')
        }
    }

</script>

router --> index.js

router.beforeEach((to, from, next)=>{
    let token = localStorage.getItem('token')
    if (token){
        // 已登录，可以向目标访问
        next();
    }

    // 未登录，登录页面
    if(to.name === "Login"){
        next();
    }

    // 未登录，访问的其他地址
    next({name: 'Login'});
})

store --> index.js

import {createStore} from 'vuex'

export default createStore({
	state: {
		username: localStorage.getItem('username'),
		token: localStorage.getItem('token'),
	},
	getters: {},
	mutations: {
		login(state, {username, token}){
			// 保存在localStorage中
			state.username = username;
			state.token = token;
			localStorage.setItem('username', username);
			localStorage.setItem('token', token);
		},
		logout(state){
			state.username = '';
			state.token = '';
			localStorage.removeItem('username');
			localStorage.removeItem('token');
		}
	},
	actions: {},
	modules: {}
})

4

提示：如果要在vue3中使用计算属性（计算属性是一个对象）：

<script setup>
    import {ref, computed} from 'vue'

    const carNum = computed(() => store.state.car)
</script>

5 vue3-cookies

5-1 安装

npm install vue3-cookies --save

• main.js

  import {createApp} from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import VueCookies from 'vue3-cookies'
  
  createApp(App).use(store).use(router).use(VueCookies).mount('#app')
  

• 使用

  import {useCookies} from 'vue3-cookies'
  const {cookies} = useCookies();
  cookies.set("ts", "123123", "10s")  // 设置值，生效日期10s
  

  https://github.com/KanHarI/vue3-cookies

5-2 使用示例

将username和token保存到cookie中，设置生效时间。

plugins --> cookie.js

import {useCookies} from 'vue3-cookies'

const {cookies} = useCookies()

export const getToken = () => {
	return cookies.get('token') || '';
}

export const getUserName = () => {
	return cookies.get('username') || '';
}

export const setUserToken = (user, token) => {
	cookies.set('username', user, '30s');
	cookies.set('username', token, '30s');
}

export const clearUserToken = () => {
	cookies.remove('username');
	cookies.remove('token');
}

在以后使用中，可直接导入方法使用