Vuex状态对象同步到VUE组件内简写;

把Vuex内的一个状态对象的属性,简写;

一共两种方式。
DEMO如下;
一、Vuex的基础搭建
1.src下面创建store.js,文件内容如下

import Vue from ‘vue’;import Vuex from ‘vuex’;
Vue.use(Vuex)

const options={
//状态对象
state: {
count: 111
},
//触发状态
mutations: {
increment (state) { state.count++ },
jian(state){ state.count– }
}
}
const store =new Vuex.Store(options)
export default store;

2.mainjs中引用

import Vue from ‘vue’import App from ‘./App’
import router from ‘./router’import store from ‘./store’
import { create } from ‘domain’;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,store,
render:h=>h(App)
)

3.在Vue文件中使用

<p>Vuex的数据 {{$store.state.count}}</p>

下面开始正式做数据同步;
一、computed 动态计算

computed:{
detailCount(){
return this.$store.state.count
}
},

在vue文件中直接使用组件内的数据即可;

<p>内部的数据 {{detailCount}}</p>

二、mapState辅助;
在单独构建的版本中辅助函数为 Vuex.mapState
在组件内,先import;
import { mapState } from ‘vuex’

 

computed:mapState({
count : state => state.count
})

这样即可;还可以做下面这种简化的写法

computed:mapState([‘count’])

下面这种方法,还是非常常用的;

如果想连mutatios里面的方法也一起简写;可以下面这样;

import { mapState ,mapMutations } from 'vuex'

export default {
  name:"UserDetail",
  data(){
      return{
          logo:"AXIHE"

      }
  },
  computed: mapState(['count']),
  methods:mapMutations([
      'increment',
      'jian'
  ]),
  watch:{
      '$route'(to,form){
          console.log(to)
          console.log(form)
      }
  }
}

这样的话,就可以直接使用了;

未经允许不得转载:朱邦邦的博客 » Vuex状态对象同步到VUE组件内简写;

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址