Vue3中使用vuex4的实现示例

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'

Vue3中使用vuex4的实现示例_第1张图片

5、使用

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

Vue3中使用vuex4的实现示例_第2张图片

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

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

Vue3中使用vuex4的实现示例_第3张图片

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

 

Vue3中使用vuex4的实现示例_第4张图片

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

Vue3中使用vuex4的实现示例_第5张图片

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


 
 

Vue3中使用vuex4的实现示例_第6张图片

6、修改 count 的值

这个和在 vue2 中的写法一样

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

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

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

store.commit('add', 3)

Vue3中使用vuex4的实现示例_第7张图片

到此这篇关于Vue3中使用vuex4的实现示例的文章就介绍到这了,更多相关Vue3使用vuex4内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Vue3中使用vuex4的实现示例)