找回密码
当前位置：前端开发者 > Vue.js > 正文

前端开发Vue全家桶之Vuex

2019-01-25 分类：Vue.js 阅读(997) 评论(0)
前端开发入门资料下载
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前端开发案例下载
赞(0)
前端开发者 » 前端开发Vue全家桶之Vuex
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论