vuejs笔记之vuex

责编:menVScode 2017-10-31 22:23 阅读(844)

        使用 vue-cli 搭建的脚手架,是没有安装 vuex 模块的,需要我们手动去安装,具体如何使用 vue-cli 搭建脚手架可以查看此片文章:http://menvscode.com/detail/59de348610c98d0e654c1b87;进入当前项目下的命令行窗口,输入 npm install vuex --save ,进行安装vuex模块。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
	age:18,
	webname:'menvscode.com',
	project:[
		{name:'qwe',number:1},
		{name:'asd',number:2},
		{name:'zxc',number:3}
	]
}

//主要是用来操控state里面的数据
const mutations = {
	addAge(){
		state.age++
	},
	minusAge(){
		state.age--
	}
}

//来调用mutations里的方法,可以进行异步操作
const actions = {
	//默认接受一个参数
	addAgePro(argum){
		console.log(argum)
		console.log(argum.state.age)
		argum.commit('addAge')
		//commit()里面接收mutations中的函数名字
	}
}

//相当于computed的作用,作用于state数据的过滤操作
const getters = {
	filtering(state){
		state.project
	}
}

export default new Vuex.Store({
	//state是用来保存数据的
	state,
	mutations,
	actions,
	getters
})

        vuex 中 state 是用来保存数据的,下面介绍如何来使用state中的数据;

        一种是直接全局使用,通过 $store.state,其返回的是保存数据的 json 对象;

        另一是局部使用,通过 import {mapState} from 'vuex' 引入,具体方法查看下方代码:computed 属性中 ...mapState([  ])

<template>
  <div id="app">
    <WebHeader :name='name'></WebHeader>
    <button @click="$router.go(-1)">返回</button>
    <p>首页默认显示的内容</p>
    {{$store.state}}
    {{webname}}
    <button @click="get">按钮</button>
    <router-view :routerDate='routerDate'></router-view>
  </div>
</template>

<script>
    import WebHeader from './components/Header.vue'
    import {mapState} from 'vuex'

    export default {
      name: 'app',
      data(){
          return {
              name:'menvscode.com',
              routerDate:'MVC前端网'
          }
      },
      computed:{
          ...mapState([
              'webname'
          ])
      },
      methods:{
          get(){
              alert(this.webname)
          }
      },
      components:{
          WebHeader
      }
    }
</script>


mutations 主要是用来操控 state 里面的数据;methods 属性中 ...mapMutations([  ]);mutations 里的方法函数能接收两个参数:一个是state的数据,另一个是函数本身接受的参数。

de<template>
  <div id="app">
    <WebHeader :name='name'></WebHeader>
    <button @click="$router.go(-1)">返回</button>
    <p>首页默认显示的内容</p>
    {{$store.state}}
    {{webname}}
    <button @click="addAge">按钮</button>
    {{age}}
    <router-view :routerDate='routerDate'></router-view>
  </div>
</template>
<script>
    import WebHeader from './components/Header.vue'
    import {mapState,mapMutations} from 'vuex'

    export default {
      name: 'app',
      data(){
          return { name:'menvscode.com', routerDate:'MVC前端网'}
      },
      computed:{
          ...mapState([ 'webname', 'age'])
      },
      methods:{
          ...mapMutations([
              'addAge'
          ]),
          get(){ alert(this.webname) }
      },
      components:{ WebHeader }
    }
</script>


actions:来调用 mutations 里的方法,可以进行异步操作。当 action 内部使用函数的时候,默认会默认传入一个参数。打印参数结果如下:

QQ截图20171102204420

若要使用 mutations 的方法,则 参数.commit( 'addAge' ),具体参考上述代码。

const actions = {
	addAgePro(argum){
		argum.commit('addAge');
	}
}
//可改写为
const actions = {
        // 默认接收过来的是一个对象 {},利用es6的解构赋值
	addAgePro({commit}){
		commit('addAge');
	}
}

通过 import {mapState,mapMutations,mapActions} from 'vuex' 引入 mapActions,然后在 methods 属性中 ...mapActions([  ]);

<template>
  <div id="app">
    <WebHeader :name='name'></WebHeader>
    <button @click="$router.go(-1)">返回</button>
    <p>首页默认显示的内容</p>
    {{$store.state}}
    {{webname}}
    <button @click="addAge">按钮addAge</button>
    {{age}}
    <button @click="addAgePro">addAgePro</button>
    <router-view :routerDate='routerDate'></router-view>
  </div>
</template>
<script>
    import WebHeader from './components/Header.vue'
    import {mapState,mapMutations,mapActions} from 'vuex'

    export default {
      name: 'app',
      data(){
          return {name:'menvscode.com',routerDate:'MVC前端网' }
      },
      computed:{
          ...mapState(['webname','age'])
      },
      methods:{
          ...mapMutations([
              'addAge'
          ]),
          ...mapActions([
              'addAgePro'
          ]),
          get(){alert(this.webname)}
      },
      components:{ WebHeader}
    }
</script>


getters:相当于computed的作用,作用于state数据的过滤操作

通过 import {mapState,mapMutations,mapActions,mapGetters} from 'vuex' 引入 mapGetters,然后在 methods 属性中 ...computed([ 'filtering' ]);


前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码