Vuex的学习
定义
Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享 在使用Vuex进行状态管理时，只需要一个共享**Store**组件，紫色组件将数据写入Store中，其他使用的组件直接从Store中读取即可
vuex的配置
安装
npm install vuex --save
新建store.js，导入
import Vuex from 'vuex' Vue.use(Vuex)
store.js中创建store对象
export default new Vuex.Store({
state:{//共享数据},
mutations:{//数据操作方法},
actions:{//异步任务},
getters:{//包装state数据的方法},
modules:{}
})挂载store对象
Vuex的核心概念
State
State是提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储在store中定义
state:{//共享数据
count:0
}在组件中访问
全局访问
<h3>{{this.$store.state.count}}</h3>按需导入访问
映射store中的state为当前组件的computed计算属性
<h3>{{ count }}</h3>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState(["count"])//映射store中的state为computed
}
};
</script>Mutation
提供变更存储在Store中数据的方法
在store中定义
mutations:{//数据操作方法
add(state){//默认参数为state
state.count++
},
addN(state,step){//带参数的
state.count+=step
}
}在组件中访问
全局访问
<button @click="addcount">+1</button>
<button @click="addcountN">+3</button>
methods:{
addcount(){//调用store的mutations中的add方法
this.$store.commit("add")
},
addcountN(){
this.$store.commit("addN",3)
}
}按需导入访问
映射store中的Mutation为当前组件的method方法
<button @click="add">-1</button> <button @click="addN">-3</button> import { mapState,mapMutations} from 'vuex' methods:{ ...mapMutations(['add','addN']),//映射store中的Mutation为method }
