目录
无子路由store单独js文件情况
store数据编写
首先在store文件夹下index.js里写入几个mutation等数据备用
export default createStore({
state: {
count:0,
arr:[
{code:1,name:'1',status:true},
{code:2,name:'2',status:false},
{code:3,name:'3',status:true},
{code:4,name:'4',status:false},
{code:5,name:'5',status:true},
],
flag:true
},
getters:{
double:state=>state.count*2,
half:state=>state.count/2,
select:state=>state.arr.filter(item=>item.status==state.flag),
len:(state,getters)=>getters.select.length
},
mutations: {
incrcount(state){
state.count++
},
subcount(state){
state.count--
},
dynincr(state,value){
state.count+=Number(value)
},
dynsub(state,value){
state.count-=Number(value)
},
change(state){
state.flag=!state.flag
},
},
actions: {
},
modules: {
}
})
编写路由组件内容,mutations/getters等内容的获取方式各有不同
map辅助方法使用
首先引入辅助方法
import { mapState,mapMutations,mapGetters} from 'vuex'
store里mutations的内容需要在methods里接收,有几种接收方法
methods:{
//以下两种为不使用辅助方法的基础写法
//写法: 本组件内使用的方法名(){this.$store.commmit("store里编写的方法名")
incrcount(){
this.$store.commit('incrcount')
},
subcount(){
this.$store.commit('subcount')
},
//以下为辅助方法
//写法1:...mapMutations(['本组件内方法名1','本组件内方法名2'])
//<注:需要本组件内方法名与store内方法名一致>
...mapMutations([
'dynincr',
'change'
]),
//写法2:...mapMutations({本组件内方法名:'store里编写的方法名'