vuex
1、安装
cnpm install vuex --save
2、使用
创建store文件夹,创建js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//存储数据
state:{
(1)获取:在其他组件中,$store.state.键名/this.$store.state.键名
(2)在组件中尽量配合计算属性使用,通过mutations内的方法调用,因为计算属性可以设置set和get方法,或使用mapState方法来代替
其中使用mapState来映射代替set和get方法:
(1)在使用的组件中import {mapState} from 'vuex'
(2)组件中三种方式使用mapState映射,模板内直接键名调用
1、computed:mapState(['键名1',...]) //相当于this.$store.state.键名;若使用双向绑定,需要设置监听事件配合e.target.value
2、computed:mapState({ 键名:'state中的键名',键名:(state)=>{return state.键名}},...,还可以设置方法来修改)
3、computed:{
//解构
...mapState({
和2中一样的形式/或1
})
}
//方法
mutations:{
方法传入state形参,即可state.键名获取state存储数据
(1)调用:在其他组件的函数中,this.$store.commit('方法名')
(2)使用mutations里的方法来处理state内的数据
(3)参数传入,这里function(state,形参);在组件中,this.$store.commit('方法名',参数)
(4)参数只能有一个
(5)调用2:this.$store.commit({
type:'方法名',
amount:参数
})
(6)使用mapMutations辅助
和state一样的写法
},
//异步方法,(如ajax)
actions:{
},
//模块
modules:{
}
})
3、在main.js中
import store from './store'
添加到vue实例化对象中,与router同级
store
代码示例:
vuex:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//仓库对象,存放多组件共用数据
export default new Vuex.Store({
//data
state:{
num:0,
age:17,
sex:'male'
},
//methods,尽量在这里处理state中的状态
mutations:{
//这里的方法,state形参获取state中的数据
add:function(state)
{
state.num++;
},
setNum:function(state,val)
{
state.num=val;
}
},
//异步方法(如ajax)
actions:{
},
//模块
modules:{
}
})
组件:
<template>
<div>
<!-- <h1>数量:{{msg}}</h1>
<button @click='adds'>点击</button>
<input type="text" v-model='num'>
{{num}} -->
<!--
<h1>{{num}}</h1>
<input type="text" :value='num' @input='change'> -->
<h1>{{sex}}</h1>
<h1>{{num}}</h1>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default{
name:'A',
data()
{
return{
count:0
}
},
//set和get方式
// computed:{
// // msg:function()
// // {
// // return this.$store.state.num;
// // },
// // num:{
// // get:function(){
// // return this.$store.state.num;
// // },
// // set:function(value){
// // this.$store.commit('setNum',value);
// // }
// // }
// },
//数组映射方式
// computed: mapState(['num','age','sex']),
//对象映射方式
// computed:mapState({
// num:'num',
// sex:(state)=>{return state.sex}
// }),
computed:{
...mapState({
num:'num',
sex:(state)=>{return state.sex},
setNum:xxx使用mutations内的方法修改
})
},
methods:{
adds()
{
this.$store.commit('add');
},
change(event)
{
this.$store.commit('setNum',event.target.value)
}
}
}
</script>
<style>
</style>