利用npm包管理工具，进行安装 vuex
npm install vuex --save
建立vuex 管理文件夹
在src 文件夹下建立vuex文件夹
在vuex下建立store.js 文件
store.js文件内容
现在store.js就是数据仓库
先引入 vue import Vue from "vue";
在引入vuex import Vuex from 'vuex';
全局方法 Vue.use() 使用插件 Vue.use(Vuex);
const state={ //定义数据
count:1
}
export default new Vuex.Store({ //放到全局
state
})
引入模板里
先引入：import store from '@/vuex/store' @是映射src文件夹
然后在export default{ } 声明
用 $store.state.count 找到数据
在数据仓库里使用方法
数据仓库
定义方法 用 const mutations={}
在放到全局
模板
调用方法 $store.commit('add') 括号里一定要有引号
$store.commit() 调用什么方法
state访问状态对象
如果你嫌写 $store.state.count 太长 可以用三种方法来简写 只用 写count
1、通过computed的计算属性直接赋值
在组件里的computed计算属性创建一个count方法
computed:{
count(){
return this.$store.state.count;
}
}
{{$store.state.count}} 就等于 {{count}}
2、通过mapState的对象来赋值
用import引入mapState
import {mapState} from 'vuex'; { } 一定要有不然报错
然后还在computed计算属性里写如下代码
computed:mapState({
count:state=>state.count
})
3、通过mapState的数组来赋值
computed:mapState(["count"])
第3节：Mutations修改状态
在数据仓库
add方法加上一个参数n 就要在数据仓库理加
const mutations={
add(state,n){
state.count+=n;
},
reduce(state){
state.count--;
}
}
记住 add(state,n) 中的state 当它是默认的值，要加参数在他后面加
在模板里
$store.commit('add',10) 这个方法 的第一个参数是数据仓库里的方法名第二个才是参数
如果嫌这个不好看可以
1、在模板count.vue里用import 引入我们的mapMutations：
import {mapState,mapMutations} from 'vuex'
2、添加methods属性，并加入mapMutations
methods:mapMutations([
'add','reduce'
]),
就可以像平时一样写
getters计算过滤操作
比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100
在数据仓库里用const声明我们的getters属性
const getters = {
count:function(state){
return state.count +=100;
}
}
在export default new Vuex.Store() 中引入
export default new Vuex.Store({
state,mutations,getters
})
模板里
因为 computed 要加多一个方法 所以 要用到es6 的扩展运算符 ...
加入count 方法
count(){
return this.$store.getters.count;
}
用mapGetters简化模板写法
actions异步修改状态
actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态
在数据仓库中声明actions
在actions里调用add和reduce两个方法
const actions ={
addAction(context){
context.commit('add',10)
},
reduceAction({commit}){
commit('reduce')
}
}
context：上下文对象，这里你可以理解称store本身。
{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
模板中的使用
我们先复制两个以前有的按钮，并改成我们的actions里的方法名，分别是：addAction和reduceAction
改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入。
methods:{
...mapMutations([ 'add','reduce' ]),
...mapActions(['addAction','reduceAction'])
},
现在就和的 mapMutations 和 mapActions 的效果一样了
异步就是在 actions 的方法里面 加个 setTimeout() 迟缓执行
就能迟缓3秒执行 减一 reduce 方法
module模块组
在数据仓库中声明模块组
const moduleA={
state,mutations,getters,actions
}
声明好后，我们需要修改原来 Vuex.Stroe里的值
export default new Vuex.Store({
modules:{a:moduleA}
})
在模板中使用
现在我们要在模板中使用count状态，要用插值的形式写入。
{{$store.state.a.count}}
如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态
computed:{
count(){
return this.$store.state.a.count;
}
},
就可以用{{count}}输出
参考 http://jspang.com/ 的内容
可以在模板里可以改变 在方法里用 this.$store.state.count =12 改变 数据仓库里的count 的值
