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;
}
}
