vuex是vue全家桶系列的重要组成部分,数据的状态管理,很多时候 我们只会把数据统一放在脚手架生成的 store文件夹的index.js中
但是在实际的项目中往往 数据可能有点庞大 而且项目开发往往是模块化开发 如果把各个模块之间的数据放在一个文件下 显示是不合理的
1.在说之前 先学习一下几个辅助函数的使用 ,
你可以直接使用 {{$store.state.count}} 也可以是 this.$store.state.count //假设 在state中有一个 count的变量
这样当然也可以 但随着项目的增加增大 显然不合理 这个时候如果我们把 vuex中的数据 映射到 组件的计算方法中显然不失为一种好方法
computed:{count:function(){return this.$store.state.count }}
这样看起来 是不是很不错啊 可惜的是 这种方法只在项目小的时候可以 项目大呢 不能写100多个这样的 计算属性吧
所以就引来 辅助函数 同时配合 es6的 扩展运算符 实现数据状态 到组件的映射
使用辅助函数 前提是先引进来
import {mapState,mapMutations,mapGetters} from "vuex"
在计算属性中
computed:{
...mapState(['count]) // 不想起名字 就是用vuex中人家的原名 就叫做 count 当作计算属性使用
...mapState({
add:'count' // 将vuex中的 count 映射成当前组件的的 add的计算属性 其实就是起一个别名
})
...mapState({
count:state=>state.count // 箭头函数的方法 映射
})
}
以上三种方法达到的效果是一样的 看你自己选择把 其他的集中辅助函数 用法 也差不多 就不再一一赘述了
2.vuex中的 模块使用
都知道 在 vuex中 又module这个东西
我在 创建的脚手架中 把 store文件 index.js文件 删除了只剩下这点东西
import Vue from 'vue'
import Vuex from 'vuex'
import test from './count.js'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
test
}
})
在当前文件夹下 创建一个count.js文件 创建一个 count模块 把里面的数据存入进去
export default {
state: {
count:10
},
getters:{
doubleCount(state){
return state.count*2;
}
},
mutations: {
add(state){
state.count++;
},
decrease(state){
state.count--;
}
},
actions: {
// 上下文参数
delayAdd(context){
setTimeout(()=>{
context.commit('add');
},1000)
}
}
}
你要是在创建更多的模块依照这种方法类型
不过在使用的时候就要变一变了 我们得指定是哪一个模块下的数据
computed(){
...mapState({
count:state=>state.test.count // 指的是 test模块下的 count数据 要用这种方法 因为其他的俩种方法默认取得是index.js文件下的 数据 我们要是不在里面放数据 全部放到模块中 他是取不到 就会报错
})
}
