码迷,mamicode.com
首页 > 其他好文 > 详细

vuex使用

时间:2020-04-03 00:49:01      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:模式   innertext   ble   module   ali   中心   独立   rom   存在   

vuex 的几个核心概念Store:Vuex 使用一个 Store 对象管理应用的状态,一个 Store 包括 State, Getter, Mutation, Action 四个属性。
  State:State 意为“状态”,是 vuex 状态管理的数据源。
  Getter:Getter 的作用与 filters 有一些相似,可以将 State 进行过滤后输出。
  Mutation:Mutaion 是 vuex 中改变 State 的唯一途径(严格模式下),并且只能是同步操作。Mutaion 使得状态变得可追踪,配合一些 devtools 可以实现 time-travel 的调试体验。
  Action:一些对 State 的异步操作可以放在 Action 中,并通过在 Action 提交 Mutaion 变更状态。
  Module:当 Store 对象过于庞大时,可根据具体的业务需求分为多个 Module。

什么样的应用场景下需要 vuex ?

  如果不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果你的应用够简单,那最好不要使用 Vuex。一个简单的 global event bus 就足够所需了。但是,如果需要构建是一个中大型单页应用,很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

  vuex 一般用于中大型 web 单页应用中对应用的状态进行管理,对于一些组件间关系较为简单的小型应用,使用 vuex 的必要性不是很大,因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信,vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

使用 vuex 解决跨组件通信问题
  跨组件通信一般指非父子组件间的通信,父子组件的通信一般可以通过以下方式:
  1、通过 prop 属性实现父组件向子组件传递数据
  2、通过在子组件中触发事件实现向父组件传递数据
  3、非父子组件之间的通信一般通过一个空的 Vue 实例作为 中转站,也可以称之为 事件中心、event bus。

 

采用 event bus 的方式适合简单的跨组件事件触发,对于多层级组件嵌套等较为复杂的场景,使用 vuex 能更好地应对。vuex 是通过将 state 作为数据中心、各个组件共享 state 实现跨组件通信的,此时的数据完全独立于组件,因此将组件间共享的数据置于 State 中能有效解决多层级组件嵌套的跨组件通信问题。

vuex 作为数据存储中心
  
vuex 的 State 在单页应用的开发中本身具有一个“数据库”的作用,可以将组件中用到的数据存储在 State 中,并在 Action 中封装数据读写的逻辑。这时候存在一个问题,一般什么样的数据会放在 State 中呢? 目前主要有两种数据会使用 vuex 进行管理:
  1、组件之间全局共享的数据
  2、通过后端异步请求的数据

 

总结:

  vuex 具体应用在哪取决于项目的规模以及具体的业务场景,可能是为了解决多层嵌套组件之间的通信问题,或是为了更好地管理应用中错综复杂的状态关系,而不能为了用 vuex 而在项目中使用 vuex。

 

使用方法:

  首先是Mutaion同步操作下:

    1、下载vuex组件,导入并注册

import Vue from ‘vue‘
import Axios from ‘axios‘
import Vuex from "vuex"
import App from ‘./App‘
import router from ‘./router‘

Vue.use(Vuex)

    2、创建store

const store = new Vuex.Store({
  state:{
      data:0
  },

  mutations:{
    edit_data(state){
        state.data++
        }
    },
  new Vue({
    el: ‘#app‘,
    router,
    store, //$store
    components: { App },
    template: ‘<App/>‘
  })
 

    3、store.commit触发同步操作edit_data,或者在组件中用$store.commit

this.$store.commit(‘edit_data‘)

示例:

技术图片
import Vue from ‘vue‘
import Axios from ‘axios‘
import Vuex from "vuex"
import App from ‘./App‘
import router from ‘./router‘

Vue.config.productionTip = false
// Vue.use(Axios)
Vue.prototype.$axios = Axios;
Vue.use(Vuex)
/* eslint-disable no-new */


const store = new Vuex.Store({
  state:{
    allnote_data:[],
    addnote_data:{"title": "", "content": "", "marked_text": ""}
  },

  mutations:{
    //访问marked页面时,用vuex获取所有数据
    get_allnote_data(state){
      $.ajax({
        url:"http://127.0.0.1:8000/api/note/",
        methods:"get",
        success:function(data){
          state.allnote_data = data.data
        }
      })
    },

    // marked页面提交数据时,用vuex添加一条数据
    getAddNoteData(state,jsonData){
      $.ajax({
        url:"http://127.0.0.1:8000/api/note/",
        type:"post",
        data:jsonData,
        success:function(arg){
         state.addnote_data = arg
          // console.log(state.addnote_data)
        }
      })
    }
  }
  
})

new Vue({
  el: ‘#app‘,
  router,
  store,
  components: { App },
  template: ‘<App/>‘
})
main.js
技术图片
import $ from "jquery"
import Marked from "marked";
export default {
  name: "App",
  data() {
    return {
     
    };
  },
  methods: {
    //点击提交添加数据
    addNote(){
      var jsonData = {
        title:this.listenTitle,
        content:this.$refs.t.innerText,  // 获取处理marked后的值,div标签添加ref="t"
        marked_text:this.markedContent
      }
      console.log(jsonData)
      // console.log(this.$refs.t.innerText)
      // this.$store.commit(‘increment‘)
      this.$store.commit(‘getAddNoteData‘,jsonData)
      
    }
  },

 //在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
  mounted(){
    this.$store.commit(‘get_allnote_data‘)
    }
};
组件

  

  action异步操作:

    1、注册action

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit(‘increment‘)
    }
  }
})

    2、store.dispatch触发

store.dispatch(‘increment‘)

示例:

技术图片
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import Axios from ‘axios‘
import Vuex from "vuex"
import App from ‘./App‘
import router from ‘./router‘

Vue.config.productionTip = false
// Vue.use(Axios)
Vue.prototype.$axios = Axios;
Vue.use(Vuex)
/* eslint-disable no-new */


const store = new Vuex.Store({
  state:{
    allnote_data:[],
    addnote_data:{"title": "", "content": "", "marked_text": ""}
  },

  //同步
  mutations:{
    //访问marked页面时,用vuex获取所有数据
    GET_allnote_data(state, data){
      state.allnote_data = data.data
    },
    // marked页面提交数据时,用vuex添加一条数据
    GETAddNoteData(state,arg){
      state.addnote_data = arg
      // console.log(state.addnote_data)

    }
  },

  //异步
  actions:{
    get_allnote_data(context){
      $.ajax({
        url:"http://127.0.0.1:8000/api/note/",
        methods:"get",
        success:function(data){
          context.commit(‘GET_allnote_data‘, data)
        }
      })
      
    },

    getAddNoteData(context, jsonData){
      $.ajax({
        url:"http://127.0.0.1:8000/api/note/",
        type:"post",
        data:jsonData,
        success:function(arg){
          context.commit(‘GETAddNoteData‘, arg)   
        }
      })
      
    }

  }
  
})

new Vue({
  el: ‘#app‘,
  router,
  store,
  components: { App },
  template: ‘<App/>‘
})
main.js
技术图片
import $ from "jquery"
import Marked from "marked";
export default {
  name: "App",
  data() {
    return {
     
    };
  },
  methods: {
    //点击提交添加数据
    addNote(){
      var jsonData = {
        title:this.listenTitle,
        content:this.$refs.t.innerText,  // 获取处理marked后的值,div标签添加ref="t"
        marked_text:this.markedContent
      }
      console.log(jsonData)
      // console.log(this.$refs.t.innerText)
      // this.$store.commit(‘increment‘)
      // this.$store.commit(‘getAddNoteData‘,jsonData) //mutation方式
      this.$store.dispatch(‘getAddNoteData‘,jsonData) //action方式
      
    }
  },

  mounted(){
    // this.$store.commit(‘get_allnote_data‘) //mutation方式
    this.$store.dispatch(‘get_allnote_data‘)  //action方式
    }
};
组件

 

vuex使用

标签:模式   innertext   ble   module   ali   中心   独立   rom   存在   

原文地址:https://www.cnblogs.com/aizhinong/p/12623988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!