vuex使用

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/>'
})

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/>'
})

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方式
    }
};