Vuex使用教程

一.什么是Vuex?

vuex是一个专门为vue.js设计的集中式状态管理架构。状态即data中的属性需要被其他vue组件使用的部分，也就是data中需要共用的属性。

二.Vuex使用

1.引入Vuex（用vue-cli构建好项目的前提下）
用npm包管理工具安装Vuex,执行命令如下：
>npm install vuex --save

2 . 新建一个store文件夹，并在文件夹下新建store.js，文件中引入vue和vuex

import Vue from ‘vue’;
import Vuex from ‘vuex’;

3.引入之后，用Vue.use进行引用
>Vue.use(Vuex);

通过以上三步操作，vuex就引用成功了，以下是具体使用
4.在main.js中引入新建的vuex文件

import storeConfig from ‘./vuex/store’

5.然后，在实例化 Vue对象时加入 store 对象 :

new Vue({
el: ‘#app’,
router,
store,//使用store
template: ‘’,
components: { App }
})

三.以下demo为例

1.用export default封装代码，让外部引用，然后定义state对象

export default new Vuex.store({
		state:{
				curTab: 0,
				count:0
		}
})

2.在header.vue模板中引入store.js，在模板中用{{$store.state.curTab}}输出curTab的值

<div>
	<router-link to="/recommend" :class="{'active' :curTab == 0}"><span @click="changeChannel(0)">推荐： {{$store.state.curTab}}</span></router-link>
	<router-link to="/rank" :class="{'active' :curTab == 1}"><span @click="changeChannel(1)">排行榜</span></router-link>
	<router-link :to="{name: 'Search'}" :class="{'active' :curTab == 2}"><span @click="changeChannel(2)">搜索</span></router-link>
</div>

3.store.js中加入改变state的方法

mutations: {
		changeTab (state, n) {
			state.curTab = n;
		},
		add(state,c){
			state.count+=c;
		}
}

4.header.vue模板中，通过事件触发调用mutations中的方法

methods: {
			changeChannel (arg) {
				store.commit('changeTab', arg);
			}
		}

这样就可以实现vuex中公用的选项卡的切换啦

state访问状态对象

状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给我们模板里data中的值。有三种赋值方式
1.通过computed的计算属性直接赋值
computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

computed:{
        count(){
            return this.$store.state.count;
        }
    }

2.通过mapState的对象来赋值
我们首先要用import引入mapState。

import {mapState} from 'vuex';

然后还在computed计算属性里写如下代码：

computed:mapState({
        count:state=>state.count  //理解为传入state对象，修改state.count属性
 })

3.通过mapState的数组来赋值

computed:mapState(["count"])

mutations修改状态

$store.commit(‘mutations方法名’，参数)
eg: $store.commit(“changeTab”,0)

模板获取Mutations方法

1、在模板count.vue里用import 引入我们的mapMutations：

import { mapState,mapMutations } from 'vuex';

2、在模板的<\script>标签里添加methods属性，并加入mapMutations

 methods:mapMutations([
        'changeTab','add'
])

通过上边两步，我们已经可以在模板中直接使用我们的changeTab或add方法了，就像下面这样。

<button @click="changeTab">-</button>

getters基本用法

getters 相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。
比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.我们首先要在store.js里声明getters对象

getters ： {
    getCount:function(state){
        return state.count +=100;
    }
}    

vue模板中取值：

	data：{
		return{
			count:store.getters.getCount
		}	
	}

用mapGetters简化模板写法

首先用import引入我们的mapGetters

import { mapState,mapMutations,mapGetters } from 'vuex';

在computed属性中加入mapGetters

...mapGetters(["count"])

actions异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态

在store.js中声明actions

actions是可以调用Mutations里的方法的，我们还是继续在上节课的代码基础上进行学习，在actions里调用changeTab和add两个方法。

const actions ={
    changeTabAction(context){
        context.commit('changeTab',1)
    },
    addAction({commit}){
        commit('add',3)
    }
}

我们都用commit调用了Mutations里边的方法,但发现这两个方法传递的参数也不一样。

• ontext：上下文对象，这里你可以理解称store本身。
• {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

模板中的使用

我们需要在vue模板中编写代码，让actions生效。我们先复制两个以前有的按钮，并改成我们的actions里的方法名，分别是：addAction和reduceAction。

<p>
  <button @click="addAction">+</button>
  <button @click="changeTabAction">-</button>
</p>

改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入。

methods:{
    ...mapMutations([  
        'add','changeTab'
    ]),
    ...mapActions(['addAction','changeTabAction'])
},

你还要记得用import把我们的mapActions引入才可以使用。