0
点赞
收藏
分享

微信扫一扫

vite2 + Vue3中Vuex4的基本配置

Vuex官网 ​​https://vuex.vuejs.org/zh/installation.html#%E7%9B%B4%E6%8E%A5%E4%B8%8B%E8%BD%BD-cdn-%E5%BC%95%E7%94%A8​​

1. 安装

 npm install vuex@next --save

2. src 下新建 store/index.js

store/index.js

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
state: {
count: 0
},
mutations: {
updatecount(state,val) {
state.count = val
}
},
getters: {},
actions: {},
modules: {}
})
export default store

3. main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

这样就可以正常使用了。使用其实和vue2 + vuex3的方式差不多。不同的就是vue2+vuex3 可以使用this.$store的方式来使用,但是vue3 + vuex4中 就不要想 this 这东西了。提供了 useStore 方法

4. 组件中使用

<template>
<h1>vux:count -> {{count}}</h1>
<el-button type="primary" @click="count = '哈哈哈'">点击修改vuex中count的值</el-button>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
setup(props, context) {
const store = useStore() //这里store 相当于vue2中使用vuex3中的 this.$store
let count = computed({
get() {
return store.state.count
},
set(val) {
store.commit('updatecount', val)
}
})
return {
count
}
}
}
</script>

使用setup 语法糖的方式 也是一样的。更方便一些,不用return了  <script setup>的时候 自动帮我们  returne


举报

相关推荐

0 条评论