Vue自学笔记(9)——Vuex的使用

什么是Vuex

官网上说Vuex是一个专门为Vue.js开发的状态管理模式。听着很高大上，其实就是解决不同组件之间相互传值的一种方式，不仅可以父子组件传值，也可以非父子组件传值，功能十分强大。但是Vuex建议在大型项目中使用，小型项目建议使用H5中的localstorage，因为Vuex相比较于localstorage配置起来还是比较复杂的。

Vuex的使用

1. src目录下新建一个vuex的文件夹
2. vuex文件夹里新建一个store.js
3. 安装vuex
   cnpm install vuex --save
4. 在刚才创建的store.js中引入Vue和vuex，并且use vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

5. 定义数据，用state存储数据

var state = {
	count:1
}

6. 定义方法，mutations里面放的是方法，方法主要用于改变state里面的数据

var mutations = {
	incCount(){
		++state.count;
	}
}

7. 暴露vuex实例

const store = new Vuex.Store({
	state,
	mutations 
})

export default store

组件中使用Vuex

1. 引入store

import store from '../vuex/store.js'

2. 注册

export default{
data(){...},
store, //注册
method:{...}
}

3. 获取state里面的数据

this.$store.state.数据

4. 触发mutations调用里面的方法，改变state里面的数据

this.$store.commit(‘IncCount’)

一个计数器的例子

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

var state = {
	count:1
}

var mutations = {
	incCount(){
		++state.count;
	}
}

const store = new Vuex.Store({
	state,
	mutations 
})

export default store

在Home.vue中引用：

<template>
    <div id="home">
        <h1>我是Home页</h1><br>
        {{this.$store.state.count}}
        <el-button type="primary" @click="addnum()">增加+</el-button>
    </div>
</template>
<script>
import store from '../vuex/store.js'

export default {
    store,
    methods:{
        addnum(){
            this.$store.commit('incCount')
        }
    }
}
</script>

同理在News.vue中引用：

<template>
    <div id="news">
        <h1>我是News页</h1>
        {{this.$store.state.count}}
        <el-button type="primary" @click="addnum()">增加+</el-button>
    </div>
</template>
<script>
import store from '../vuex/store.js'

export default {
    store,
    methods:{
        addnum(){
            this.$store.commit('incCount')
        }
    }
}
</script>

在Home页中点击按钮，可以使state中的count增加，再切换到News页时点击按钮，可以使state中的按钮在原来count结果的基础上再增加。

不是很常用的用法

刚才主要介绍了state和mutations的用法。还有几个不太常用的用法，也在这里记录一下：

1. getters：有点类似计算属性，改变state里面的count数据的时候会触发getters里面的方法获取新的数值

var getters = {
    computedCount:(state)=>{
        return state.count*2
    }
}

const store = new Vuex.Store({
	state,
    mutations,
    getters
})

组件中调用computedCount函数：

this.$store.getters.computedCount

当state.count加1时，就调用computedCount函数，state.count乘以2。

2. actions类似于mutation（基本没用）

本人原创，转载请标明出处，谢谢合作！