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

前言

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

　　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 ><i class="fa fa-home"></i><span class="nav-label">vuex动态改变：{{el.name}}</span></a></li>
　　<li><a><i class="fa fa-home"></i>{{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放出来供大家下来研究。