vue3基础入门-p09-Vuex 4 状态管理

平台开发 > vue3入门基础 vue3,vuex4

字数:867

Vuex 是什么？
vuex 安装
vuex 特点
1. vuex 使用步骤
2. vuex 使用示例

Vuex 是什么？

官网： https://vuex.vuejs.org/zh/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？
在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

vuex 安装

npm install vuex@next

vuex 特点

每一个 Vuex 应用的核心就是 store（仓库）。 “store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

Vuex 的特点：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化

vuex 使用步骤

在 Vue 之后引入 vuex

<!--引入vuex，注意需要在vue之后引入-->
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script src="./node_modules/vuex/dist/vuex.global.js"></script>

创建一个新的 store 实例

// 创建一个新的 store 实例
const store = Vuex.createStore({
    // state: 同组件中的data，保存全局共享数据
    state() {
        return { }
    },
    // mutations：同组件中的methods，提供修改共享数据方法
    mutations: { },
    // getters: 同组件中的computed
    getters: { }
})

将 store 实例作为插件安装

app.use(store)

在组件中使用store

使用state

{{ $store.state.xxx}}

更新state

// 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
$store.commit('xxfn')

vuex 使用示例

vuex 数据共享

<body>
<div id="app">
    {{ $store.getters.fm }}
    <increase></increase>
    <decrease></decrease>
</div>
<!--引入vuex，注意需要在vue之后引入-->
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script src="./node_modules/vuex/dist/vuex.global.js"></script>

<script>
    // 创建一个新的 store 实例
    const store = Vuex.createStore({
        // state: 同组件中的data，保存全局共享数据
        state() {
            return {
                count: 0
            }
        },
        // mutations：同组件中的methods，提供修改共享数据方法
        mutations: {
            // 在执行mutations中定义的方法时，系统会自动给这些方法传递一个state参数
            increase(state) {
                state.count++
            },
            decrease(state) {
                state.count--
            }
        },
        // getters: 同组件中的computed
        getters: {
            fm: (state) => {
                return state.count + '个点赞'
            }
        }
    })

    const app = Vue.createApp({})

    app.component('increase', {
        template: `
          <div>
          <button @click="add">点赞+1</button>
          {{ $store.state.count }}
          </div>
        `,
        methods: {
            add() {
                // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
                this.$store.commit('increase')
            }
        }

    })

    app.component('decrease', {
        template: `
          <div>
          <button @click="sub">点赞-1</button>
          {{ $store.state.count }}
          </div>
        `,
        methods: {
            sub() {
                // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
                this.$store.commit('decrease')
            }
        }
    })

    app.use(store)
    const vm = app.mount('#app')
    window.vm = vm
</script>
</body>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。