vue3 使用vuex以及数据持久化

目录

1.创建文件 src/store/index.js

2.npm 安装

3.在创建的index.js 文件内写入：

4.在main.js文件里面引入注册vuex

5.(xxx.vue) 组件中调用 vuex方法

---

1.创建文件 src/store/index.js

2.npm 安装

   安装vuex命令 ：npm install vuex@next --save 

   安装持久化命令 ：npm install --save vuex-persistedstate

3.在创建的index.js 文件内写入：

// 引入vuex
import { createStore } from 'vuex';

// 引入持久化
import createPersistedState from 'vuex-persistedstate';

const store = createStore({

    // 定义数据
    state: {

        info: '',

    },

    //同步方法
    mutations: {

        updateInfo(state, payload) {

            state.info = payload;

        }
    },

    //异步方法
    actions: {

        updateInfoSaync(context, payload) {

            //               同步方法	  内容
            context.commit('updateInfo', payload);

        }
    },

    //计算属性
    getters: {},

    //模块
    modules: {},

    //持久化数据
    plugins: [

        createPersistedState({

            key: 'vuex', // 存储是的名字

            // 也可以是sessionstorage

            storage: window.localStorage

        })
    ]

})

// 抛出
export default store;

4.在main.js文件里面引入注册vuex

import store from './store' // 引入store/index.js 文件

const app = createApp(App)

app.use(store) //注册vuex

app.mount('#app')

5.(xxx.vue) 组件中调用 vuex方法

<script>

import {useStore} from 'vuex'
import { onMounted } from "vue";

exportdefault{
	setup(){

        let store = useStore();

        onMounted(()=>{

            //调用 vuex 异步存储方法

				        // 异步存储中的方法名
	        store.dispatch('updateInfoAsync','修改后的值');

        })
	
	}
}

</script>