Vue3使用vuex4

龙雨LongYu12 2022-06-28 我要评论

1、引入依赖：

npm i vuex

2、新建文件夹 store ，在里面新建文件 index.js

3、index.js文件内容：

import { createStore } from 'vuex'
 
export default createStore({
  state: { 
  
  },
  mutations: { 
     
  },
  actions: {  
    
  },
  modules: {
  }
})

4、在 main.js 中引入

import store from './store'

5、使用

在 store/index.js 的 state 中添加 count: 0

在任一组件文件中：加入下面代码：

import { useStore } from "vuex";
export default {
  name: "App",
  setup() {
    // Vue3 有个 composition api 的入口
    const store = useStore();// 获取容器
    
  },
};

获取到容器 store 后，获取 Vuex 中的 count 的值，通过 store.state.count 来获取。

直接在 template 中使用，目前可以使用旧版本写法

如果想要字段 count 改变后，页面显示数据也改变，需要引入 vue 的计算属性 computed

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>Vuex</h1>
  <h1>{{ count }}</h1>
</template>
 
 
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "App",
  setup() {
    // Vue3 有个 composition api 的入口
    const store = useStore(); // 获取容器
    // 获取 Vuex 中的 count 的值
    console.log("store.state.count", store.state.count);
    return {
      count: computed(() => store.state.count),
    };
  },
};
</script>

6、修改 count 的值

这个和在 vue2 中的写法一样

在 store/index.js 中添加下面代码：

 mutations: { 
    add(state, payload) {
      state.count += payload
    }
  },

在要修改 count 的值的组件中通过 commit 来修改

store.commit('add', 3)