Vue.js（九）

• Z时代
• 2024-01-10
• 分类：综合

Vuex：响应式多组件共享变量

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

安装：npm install vuex --save
使用：
    引入：import Vuex from 'vuex'
    安装插件：Vue.use(Vuex)
    const store = new Vuex.Store({
        //共享变量
        state: {
            //Vue.prototype.$store.state.counter
            counter: 1000,
            stu: [
                {name: "ld", age: 12},
                {name: "sara", age: 11},
                {name: "admin", age: 10}
            ],
            info: {ip: "127.0.0.1", password: "aaa"}
        },
        //改变共享变量
        mutations: {
            //this.$store.commit('increment', 1)
            increment(state, count) {
                state.counter += count;
            },
            //this.$store.commit('addStu', {name: 'user', age: 9})
            addStu(state, stu) {
                state.stu.push(stu);
            },
            //this.$store.commit({type: 'decrement', count: 1, img: ''})
            decrement(state, payload) {
                state.counter -= payload.count;
            },
            update(state) {
                //响应式添加属性
                Vue.set(state.info, 'address', '南京');
                //响应式删除属性
                Vue.delate(state.info, 'password');
            }
        },
        //异步操作
        actions: {
            updateInfo(context, name) {
                //this.$store.dispatch('updateInfo', 'Sara')
                setTimeout(() => {
                    context.commit('update');
                    console.log(name);
                }, 1000)
            }
        },
        //获取共享变量
        getters: {
            //this.$store.getters.mul
            mul(state, getters) {
                return state.counter * state.counter;
            },
            //this.$store.getters.moreAgeStu(10)
            moreAgeStu(state) {  //如果需要传参，返回值必须是函数
                return function (age) {
                    return state.stu.filter(s => s.age > age);
                }
            }
        },
        //模块化
        modules: {
            //this.$store.state.a.count
            //this.$store.commit(...)
            //this.$store.getters....
            //this.$store.dispatch(...)
            a: {
                state: {count: 1},
                mutations: {},
                actions: {},
                getters: {}
            }
        }
    })
    导出：export default store
    引入：import Store from './store'
    注册：new Vue({store})
    使用：
        Vue.prototype.$store.state.counter
        this.$store.commit('increment', 1)
        this.$store.commit('addStu', {name: 'user', age: 9})
        this.$store.commit({
            type: 'decrement',
            count: 1
        })
        this.$store.dispatch('updateInfo', 'Sara')
        this.$store.getters.mul
        this.$state.getters.moreAgeStu(10)

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
    render: h => h(App)
}).$mount('#app')
// new Vue({
//     el: '#app',
//     components: '{App}',    //注册组件
//     template: '<App/>'  //使用模板把 'el: '#app'' 挂载的内容替换掉
// })

以上是 Vue.js（九） 的全部内容， 来源链接： utcz.com/z/380643.html