前言
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放出来供大家下来研究。