vuex 入门随记

首先肯定是要安装vuex

这里我们使用npm包管理工具进行安装

npm install vuex --save

安装好了我们就能愉快的使用vuex 进行我们项目的开发

vuex其实是一个集中式状态管理架构。我理解的意思大概便是共享数据，所以在大型项目中会经常用到。例如，我们用户的登录状态，地理位置等等，当这些数据共享了之后，每当跳转一个页面，数据不用重新在从服务器中获取返回了。

我们在component目录下创建一个vuex文件夹，在其中创建一个store.js的文件文件中引入我们的vue 和vuex

import Vue from 'vue'

import Vuex from 'vuex'

引入后我们使用Vue.use(Vuex)来引用。

在store.js中我们创建一个常量对象

const state={

 count:3

}

state对象里面 就存放着我们的需要共享的数据

我还需要对共享的数据进行暴露

export default new Vuex.Store({

  state

})

我们创建一个count.vue 模板,来引入共享数据

<template>

  <div>

     <p>{{$store.state.count}}</p>

</div>

</template>

<script>

 import  store from '@/vuex/store'

exprot default {

   data () {

     return {

    }

  }，

 store

}

</script>

这样我们一个小demo就完成了

我们还可以对我们模板中的普通变量进行赋值

computed:{   

 count(){       

 return this.$store.state..count;   

  }

}

vuex 还有其他的方法

mapState 给我们普通变量赋值

引入

import {mapState} from  'vuex'

然后就可以在computed中给我们count变量赋值

通过mapState 对象来赋值

computed：mapState{

count:state=>state.count

}

通过mapState 数组来赋值,这是最简的赋值方法

computed：mapState(['count'])

mutations可以修改状态

同样 我们先要引入

import {mapState,mapMutations} from  'vuex'

在store.js文件中，我们加入mutations

const mutations= {

add(state,n){state.count+=10;},

reduce(state,n){state.count-=10;}

}

然后我们暴露它

export default new Vuex.Store({

  state，mutations

})

这时候我们回到count.vue

我们用commit方法传递参数

<div>{{$State.commit('add',10)}}</div>

<div>{{$State.commit('reduce',10)}}</div>

在script标签中，我们加入methods 方法

//要是有多个方法使用以下格式，最常用这写法

//...为es6的展开运算符

methods;{

...mutations(['add','reduce'])

}

//要是只有一个方法，可以简写

methods;mutations(['add','reduce'])

getters计算过滤状态

意识便是在过去数据前，对数据进行一个加工处理工作，你可以把它看作为Store.js的计算属性

同样我们在store.js中加入一个getters方法

const getters = {

count:state=>state.count+=100;

}

在export中加入

export default new Vuex.Store({  state，mutations，getters})

我们回到count.vue中

对computed计算属性进行改写

computed：{

//同样我们使用展开运算符

...mapState(['count'])，

count(){

return this.$State.getters.count

},

//这样每次count的数据改变，就会触发getters，先改变数据的值，再获取显示

另外有map引用的简写方法

...mapGetters(['count'])

}

要是使用map引用的简写方法，我们就要在import中引入

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

actions异步修改状态

actions 和 mutations的作用基本一样，唯一不同actions是异步修改，而mutations是同步修改。

在store.js中声明actions，actions是可以调用mutations的方法的

const actions= {

//context指的是上下文，这里也可以理解为state本身

addAction(context) {

context.commit('add',10)

},

 reduceAction({context}){     

  context. commit('reduce',10)   

}

//要是只有一个参数

}

在export default中

export default new Vuex.Store({  state，mutations，getters,actions})

module模块组

如果项目规模比较大，需要共享的数据也越来越多，这时候就要对我们共享的数据进行分组，

在我们的store.js中 ，声明一个module

const  moduleA= {

state,mutations,getters,actions

}

声明之后，我们要修改原来 Vuex.Store里的值：

export default new Vuex.Store ({

modules:{a:moduleA}

})

而在模板中传值的方式变成

{{$Store.state.a.count}}

赋值给普通变量的方式变成

 computed:{    

count(){       

 return this.$store.state.a.count;   

 }

}