配置 vue3 vuex

项目 还没搭建项目可以先搭建 vue3 项目搭建

vue3 vuex 如何配置

  1. 安装(选择你的包管理工具即可)

    npm install vuex@next
    yarn add vuex@next

  2. 到项目目录 src 下

    • 新建 store 文件夹
    • 新建 index.js 文件

  3. 在 indes.js 下引入 vuex

1
2
import { createStore } from "vuex";

  1. 创建 store 并导出
  • 这个和 vue2 基本一致 没学过 vue2 就直接复制即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default createStore({
state: {
    user:{
    name:'name'
    }
},
mutations: {
    setUser(state,val) {
    state.user.name = val
    }
},
actions: {
    actionUser({
    commit
    }) {
    setTimeout(() => {
        commit('setUser','actionUser')
    },3000)
    }
},
modules: {},
});
  1. src 下 main.js 引入 store
    • 这时 完整的 main.js 是这样的
1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import store from './store/index'
import App from './App.vue';

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

  1. 到 App.vue 或者随意一个你可进入的页面即可
1
2
3
4
5
6
// 导入 vuex store
import { useStore } from 'vuex'
setup() {
    let Store = useStore()
    console.log(Store.state.user)
    }
  1. 根据你自己的包管理器 运行一下
  • yarn dev
  • npm run dev

这时候你应该可以看到 控制台 按f12 打印出来的 name

  1. Vue3 vuex commit (基于 第6步代码 )

    1
    2
    Store.commit('setUser','组件用户')
    console.log(Store.state.user)

    这时候你应该可以看到 控制台 按f12 打印出来的 name 为 组件用户

  2. Vue3 vuex (异步更新)dispatch (基于 第6步代码 )

  • 设置定时器只是为了打印而已
    1
    2
    3
    4
       Store.dispatch('actionUser')
       setTimeout(() => {
    		console.log(Store.state.user)
    },3100)

    这时候你应该可以看到 控制台 按f12 打印出来的 name 为 actionUser

好了完成啦！ 你可以在任意页面使用 vuex 啦