Vue之Vuex

Vue之Vuex

Vue全家桶

vue + vue-router + vuex 更能体现vue的mvvm设计模式，其中：

vuex相当于mvvm中的View视图

vue-router相当于ViewModel控制器

vuex相当于Model数据模型

vue全家桶，基本上网页上什么都可以实现

为什么要使用Vuex

解决组件间传值的复杂性，vuex好比一个商店任何组件都可以进去拿东西

安装Vuex

官网

npm install vuex --save

前后端分离项目

现在用vue + vue-router + vuex做一个项目：

webpack

从今以后就要用vue-cli里的webpack模板了

vue init webpack

npm run dev启动

main.js

// 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 App from './App'
import $ from 'jquery'

// 这种奇葩的语法是因为webpack帮你导入了里面的文件
import router from './router'
import Vuex from 'vuex'
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
      // 这里面的状态，跟每个组件的数据属性有关系
    allList:[],
    note:{
        title:'',
        content:'',
        markdown:''
    }
  },
  mutations: {  // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
    getAllDatas (state) {
          $.ajax({
              url:'http://127.0.0.1:9527/api/comments/',
              methods:'get',
              success:function(data){
                  state.allList = data;
              }
          })
    },
    addOneNote (state,newData){
        state.allList = newData;


    }
  },
  actions:{
      addOneNote(context,json){
          $.ajax({
            url:"http://127.0.0.1:9527/api/comment/create/",
            methos:'post',
            data:json,
            success:function(data){

            contenx.commit('addOneNote',data)

            },
            error:function(err){
                console.log(err);
            }
        })
          
      }
  }
})


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <Vheader/>
    <router-view/>
  </div>
</template>

<script>
// 下载：npm install bootstrap@3 --save默认下载的最新版本是4的所以要加个@3
// 引入：bootstrap在这里引入即可
import 'bootstrap/dist/css/bootstrap.min.css'
import Vheader from './components/Vheader.vue'
import $ from 'jquery'
export default {
  name: 'App',
  components:{
    Vheader
  },
  created(){
      // DOM创建之前执行的方法
  },
  mounted(){
      // 另一个生命周期方法，和上面的created方法相反，DOM加载完了执行
      // DOM加载完了再把数据渲染进去
      
      // var _this = this;
      // $.ajax({
      //     url:'http://127.0.0.1:9527/api/comments/',
      //     methods:'get',
      //     success:function(data){
      //         // 这里面的this并不是全局对象vue
      //         console.log(this);
      //         _this.$store.state.allList = data;
      //     }
      // })


      this.$store.commit('getAllDatas');


  }
}
</script>

<style>

</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Vmain from '@/components/Vmain'
import Vnote from '@/components/Vnote'


// @的是webpack设置的别名：/当前项目/src
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)


// 抛出一个router对象
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Vmain',
      component: Vmain
    },
    {
      path: '/note',
      name: 'Vnote',
      component: Vnote
    },
  ]
})

Vnote组件集

Vnote > VnoteShow > VnoteList > VnoteItem

Vnote：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">我的笔记列表</h3>
                  </div>
                  <div class="panel-body">
                      <!-- 笔记列表 -->
                      <VnoteShow></VnoteShow>
                  </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    
                  </div>
                  <div class="panel-body">
                    <!-- markdown编辑器 -->
                    <Vmark></Vmark>
                  </div>
                </div>
            </div>
        </div>    
    </div>
</template>

<script>
    import Vmark from './Vmarked.vue'
    import VnoteShow from './VnoteShow.vue'
    export default{
        name:'Vnote',
        data(){
            return {
                noteList:[
                {id:1,title:'今天很辛苦',content:'你说哈利'},
                {id:2,title:'今天很辛苦2',content:'你说哈利2'}
                ]
            }
        },
        components:{
            Vmark,
            VnoteShow
        }
    }
</script>
<style scoped>
    
</style>

VnoteShow

<template>
    <div>
        <VnoteList></VnoteList>
    </div>
</template>

<script>
    import VnoteList from './VnoteList.vue'
    export default{
        name:'',
        data(){
            return{
                
            }
        },
        components:{
            VnoteList
        }

    }
</script>
<style scoped>
    
</style>

VnoteList

<template>
    <div>
        <ul>
            <VnoteItem v-for = '(item,index) in getAllDatas' :item = 'item'></VnoteItem>
        </ul>
    </div>
</template>

<script>
    import VnoteItem from './VnoteItem.vue'
    export default{
        name:'',
        data(){
            return{

            }
        },
        components:{
            VnoteItem
        },
        computed:{
            getAllDatas(){
                this.$store.state.allList = [{title:'123',content:'123'},{title:'123',content:'123'}];
                console.log(this.$store.state.allList);
                return this.$store.state.allList
            }

        }

    }
</script>
<style scoped>
    
</style>

VnoteItem

<template>
    <li>
        <h2>{{item.title}}</h2>
        <p>{{item.content}}</p>
    </li>
</template>

<script>
    export default{
        name:'',
        data(){
            return{

            }
        },
        props:{
            item:Object
        },

    }
</script>
<style scoped>
    
</style>

Vmarked

<template>
    <div class="wrap">
        请输入文章标题<input type="text" v-model='titleHandler' />  
        <button class="btn btn-success" @click='addOneNote'>提交</button>
        <div class="mark">
            <textarea rows="10" cols="100" class="editor" v-model = 'markdownHandler'></textarea>
            <div class="show" v-html = 'markedValue' ref='t'></div>
        </div>
    </div>
</template>
<script>
    import $ from 'jquery'
    import Marked from 'marked'
    export default {
        name:'Vcontent', 
        data(){             
            return {
                markValue:'',
                
            }
        },
        methods:{
            addOneNote(){

                var json = {
                    title:this.titleHandler,
                    markdown:this.markdownHandler,
                    content:this.$refs.t.innerText

                }

                // 这个是触发mutaions中的方法，这个方法有局限性，只限于同步操作
                // this.$store.commit('addOneNote',json)

                this.$store.dispatch('addOneNote',json)
            }
        },
        computed:{
            titleHandler:{
                set:function(newValue){

                    this.$store.state.note.title = newValue
                },
                get:function(){
                    console.log(this.$store.state.note.title)
                    return this.$store.state.note.title;
                }
            },
            markdownHandler:{
                set:function(newValue){

                    this.$store.state.note.markdown = newValue
                },
                get:function(){
                    console.log(this.$store.state.note.markdown)
                    return this.$store.state.note.markdown;
                }                
            },
            markedValue(){
                return Marked(this.markdownHandler)
            }
        }
    }
</script>
<style scoped>
    .t {
         300px;
        height: 100px;
    }
    .mark{
        800px;
        height: 400px;
        margin: 0 auto;
    }
    .editor,.show{
        float: left;
         395px;
        height: 400px;
        border: 1px solid #666;
    }
</style>