前端开发Vue全家桶之Vuex

前端开发入门资料下载
web前端开发视频下载
交互式web前端开发 下载

今天来总结vue全家桶的成员之一——vuex!!
1、What
vuex是专为vue.js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
1.1 状态
组件内部状态:仅在一个组件内部使用的状态(data字段)
应用级别状态:多个组件共用的状态
2、Why
当在一个组件中,我们可以在data中定义状态,进行使用,但涉及到兄弟组件通信时 兄弟组件又各自有子组件时,就会涉及到层层嵌套,再层层查找状态传给父组件的问题,这时候相比如果我们如果能直接取出要用的状态,就会繁琐很多,因而涉及到多个组件去操作同
一状态,使用vuex会更方便。
3、When
当多个视图依赖同一状态,或来自不同的行为需要变更同一状态
4、How
安装vuex模块 npm install vuex –save
作为插件使用 vue.use(Vuex)
定义容器 new Vuex.Store()
注入根实例 { store }
src文件夹下新建store文件夹 在其下index.js中引入vuex
javascript 代码

import vue from ‘vue
import Vuex from ‘vuex’ // 1、引入vuex
import axios from ‘axios’
vue.use(Vuex) // 2、作为插件使用
// 3、定义一个容器
let store = new Vuex.Store({
    state: {
        count: 100,
        title: ”,
        list: [],
    },
    getters: {
        // 对state中的数据进一步处理
        filterCount(state) {
            return state.count >= 120 ? 120 : state.count
        },
    },
    mutations: {
        add(state, payload) {
            // if (state.count >= 120) {
            // return
            // }
            state.count += payload.n
        },
        minus(state, payload) {
            state.count -= payload.n
        },
        changeTitle(state, payload) {
            state.title = payload.title
        },
        changeList(state, list) {
            state.list = list
        },
    },
    actions: {
        // 异步操作要写在actions中,然后再提交一个mutation
        addAction(context) {
            // context中包含了跟上面实例中一样的方法
            setTimeout(() => {
                // 改变状态 提交mutation
                context.commit(‘add’, { n: 5 })
            }, 1000)
        },
        getListAction({ commit }) {
            axios
                .get(
                    ‘http://easy-mock.com/mock/598d8098a1d30433d85e5e46/example/list1’,
                )
                .then((data) => {
                    // console.log(data.data)
                    commit(‘changeList’, data.data) // 拿到数据后提交一个mutation 然后去改变store中的状态
                })
                .catch((error) => {
                    console.log(error)
                })
        },
    },
})
export default store // 4、把上面new的vuex实例导出去

然后在main.js使用vuex:
javascript 代码

import vue from ‘vue’
import App from ‘./ ‘
import router from ‘./router’
import store from ‘./store’ // 5、在此使用vuex实例 注入到vue实例中
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: ‘#app’,
    router,
    store, // 6、注入实例 到此就可以使用vuex进行状态管理了
    template: ‘<App />’,
    components: { App },
})

练习vue的小demo
练习vuex

前端开发作品下载
web前端开发入门下载
web前端开发案例下载
» 本文来自:前端开发者 » 《前端开发Vue全家桶之Vuex》
» 本文链接地址:https://www.rokub.com/7981.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!