vuejs学习——vue+vuex+vue-router项目搭建(三)

前言

　　为什么用vuex：组件之间的作用域独立，而组件之间经常又需要传递数据，项目比较小的话传递数据还好，越大的项目，涉及的组件通信就越多、越频繁，此时管理起来就会非常累，而且容易出错，这就是 Vuex 的意义所在。它可以将数据置于单独的一层，并提供给外部操作内部数据的方法。粗俗一点，就这样理解吧。vuex1.0官网

Vuex下载

$ cnpn install  vuex@1.0 --save

　　现在使用vue1.0的生态的话都要加上版本号，不是默认都是最新版本，而vue1.0只能配合版本1来使用。

Vuex引入

　　接下来我们在vuex文件夹新建 store.js(初始化的 state 对象)和actions.js（定义动作）

　　store.js代码如下：

//引入相关文件

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

//定义初始化变量

const state = {

    list:[{

        name:'张三'

    }],

    count:0

}

//定义动作

const mutations = {//模仿ajax获取新数据后 动态更新data

    GETLIST (state, amount) {

        state.list = amount

    },

    //官方例子，加减

    INCREASE(state, amount){

        state.count=state.count+amount

    },

    REDUCE(state,amount){

        state.count=state.count-amount

    }

}

export default new Vuex.Store({

    state,

    mutations

})

　　actions.js代码如下：

export const listsCounter = function ({ dispatch, state },list) {//list为调用increment方法所传的值

  dispatch('GETLIST', list)

}

export const increaseCounter = function ({ dispatch, state }) {

  dispatch('INCREASE', 1)

}

export const reduceCounter = function ({ dispatch, state }) {

  dispatch('REDUCE', 1)

}

　　最后我们在main.js文件引入store

import store from './components/vuex/store'
//Vue中加入store

　new Vue({
　　　store,
　　　components: { App }
　})

Vuex使用　

　　我们需要修改根组件来让应用注意到 store 的存在位置。 [vuex] store not injected. make sure to provide the store option in your root component. 如果没有在根组件引入控制台会提示这个警告

　　App.vue文件中引入store

　　import store from './components/vuex/store'

    export default {

        store: store

    }

　　引入完后，我们打开第二章里建的MenuLeft.vue文件。我的思路如下图

　ok，我们开始吧，引入 store文件

　template中加入

<li v-for='el in data'><a >vuex动态改变：{{el.name}}</a></li>
　　<li><a>{{countValue}}</a></li>

　import store from '../vuex/store'

    export default {

        components: {

            User

        },

        data(){

            return{

                datas:[]

            }

        },

        methods:{

            go(el){

                this.$route.router.go({

                    path: el

                })

            },

        },

        store:store,

        vuex: {

            getters: {

              data: state => state.list,  //获取我们刚刚在store文件中定义的list数组对象

              countValue:state => state.count //获取count变量，用于显示加减改变的值

            }

        },

    }

　　ok，现在可以看看效果了，顺利的话，你应该和下图是一样的

　　接下我们就开始写方法，动态改变list吧，进入AsideHeade.vue 文件，引入actions.js

import { listsCounter } from '../vuex/actions'

    export default {

        data() {

            return {

                ab:[{

                    name:'王五'

                }]

            }

        },

        methods: {

            change(){

                this.setlist(this.ab)

            }

        },

        vuex: {

            actions: {

              setlist: listsCounter

            }

        }

    }

　　你们可以试试点看看左侧导航是不是发生改变了，是不是感觉vuex还是挺不错的，哈哈。

　　我们还有一个加减的例子，我想留在大家在看官网的同时实现出来，样式下图。

　　三篇vue项目搭建就完了，相信大家已经可以自己搭建出来了，demo放出来供大家下来研究。

巴特西

vuejs学习——vue+vuex+vue-router项目搭建(三)

前言

Vuex下载

Vuex引入

Vuex使用

最新文章

热门文章