Vue3-vuex4

• vuex4是vue3的兼容版本；关注兼容性，提供和vuex3相同的api，可以在vue3中复用之前的代码

• 中文文档 https://next.vuex.vuejs.org/zh/index.html
  

  初始化vuex

• 为了向vue3初始化方式看齐，vuex4初始化的方式醉了相应的变化：使用新的createStore函数创建新的实例

• store/index.js

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

• main.js全局注册

import { createApp} from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App);
app.use(store);

vuex中的数据响应式变化

vuex3的传统写法数据是响应式变化的

<template>
    <div>      
        <div >{{$store.state.count}}</div>
        <button @click="$store.commit('add')" style="margin-left: 15px">+</button>
    </div>
</template>

…toRefs方式保留state数据响应式

• let state = store.state;
• return {…toRefs(state)} 在dom中直接写在state中声明的字段即可
• {{count}}等同于store.state.count {{username}}等同于store.state.username

<template>
    <div>
       <div >{{count}}</div>
       <button @click="add" style="margin-left: 15px">+</button>
       <button @click="handleupdateCount('100')" style="margin-left: 15px">更改值为100</button>
    </div>
</template>

<script>
import { toRefs}  from 'vue'
import { useStore } from 'vuex'
export default {
     //返回store的实例  响应式数据只有state
     var store = useStore();
     let state = store.state;
     //这种写法动态更改的时候数据丢失响应式特性
     // let count = store.state.count return count
    return{
        ...toRefs(state),
    }
}
</script>

computed方式保留state数据响应式

<template>
    <div>
       <div >{{count}}</div> 
    </div>
</template>

<script>
import { computed }  from 'vue'
import { useStore } from 'vuex'
export default {
     //返回store的实例  响应式数据只有state
     var store = useStore();
     let count = computed(() => {
         return store.state.count
     })
    return{
       count
    }
}
</script>

通过commit或者dispath进行数据更改

<template>
    <div>
        <div style="display: flex;justify-content: center">
            <!-- 传统写法 -->
            <div >{{$store.state.count}}</div>
            <button @click="$store.commit('add')" style="margin-left: 15px">+</button>
            <!-- composition写法  -->
            <div >{{count}}</div>
            <button @click="add" style="margin-left: 15px">+</button>
            <button @click="handleupdateCount('100')" style="margin-left: 15px">更改值为100</button>
        </div>
    </div>
</template>
<script>
    import { toRefs ,computed}  from 'vue'
    import { useStore } from 'vuex'
     export default {
        name: "18.vuex4",
        setup(){
            //返回store的实例  响应式数据只有state
            var store = useStore();           
            let state = store.state;
            const add = (newVal) => {
                // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
                // 使用 store.commit 访问 mutation ， 来改变state
                // 在 Vuex 中，mutation 都是同步事务
                // 通过 store.commit('mutation名称', 参数)
                store.commit('add', newVal)
            }
            // 定义函数
            const handleupdateCount = (newVal) => {
                // Action 提交的是 mutation，而不是直接变更状态。
                // Action 可以包含任意异步操作。
                // 通过 store.dispatch('action名称') 使用
                store.dispatch('updateCount', newVal)
            }
            return{
                ...toRefs(state),
                add,
                handleupdateCount
            }
        }
    }
</script>

• store.js

import { createStore } from 'vuex'
export default createStore({
    state(){
        return{
            count:1,
            aa:2
        }
    },
    mutations:{
        add(state){
            state.count++;
        },
        update(state,newVal){
            state.count = newVal;
        }
    },
    actions:{
        updateCount({commit}, newVal){
            commit('update', newVal)
        }
    }
})

vuex 模块化 跟veux3写法一样

<template>
    <div>
       <div >{{count}}</div>
    </div>
</template>
<script>
     import { toRefs ,computed}  from 'vue'
     import { useStore } from 'vuex'
     export default {
        setup(){
            //返回store的实例  响应式数据只有state
            var store = useStore();
            let state = store.state.user;
            return{
                ...toRefs(state),
            }
        }
    }
</script>

• modules/user.js

let user = {
    state(){
        return{
            count:1,
            aa:2
        }
    },
    mutations:{
    },
    actions:{
    }
}
export default user;

import { createStore } from 'vuex'
import user from './modules/user'
export default createStore({
    modules: {
        user
    },
})