vue-cli

使用webpack构建vue项目

• 安装node.js,git,淘宝镜像
• cnpm install -g @vue/cli -init
• cnpm install -g vue-cli 
• vue webpack 项目名字
• cd 项目名字
• npm run dev  (运行项目)

安装 vuex

•   cnpm install --save vuex 
  
•  main.js

import store from './vuex'
new Vue({  el: '#app',  router,  store,  components: { App },  template: '<App/>'})

• 在src文件夹中创建 vuex文件夹，里面有index.js

需要引入 vue vuex  
import Vue from "vue";

import Vuex from "vuex";此处需要use一下
Vue.use(Vuex);
const store = new Vuex.Store({  state: {    list: []  },  mutations: {
    
      add(state, payload) {      console.log(state, payload);      state.list.push(payload);      console.log(state.list);    }  },  /**   * gutter 相当于store 的计算属性   * 默认将 state 传入   */  getters: {    waitlist(state) {      return state.list.filter(item => item.checked === false);    },    comlist(state) {      return state.list.filter(item => item.checked === true);    }  }});
export default store;

• all.vue

<template>  <div>    <h4>all 组件</h4>    <ul>      <li v-for ='item in list' :key="item.id" >        <input v-model="item.checked" type="checkbox">         <span :class='{line:item.checked}' >{{item.text}}</span>      </li>    </ul>  </div></template><script>  import {mapState} from 'vuex';  export default{    name:'all',    data(){      return {
      }    },    mounted(){
    },    computed:{      /*       使用vuex 中的state的mapState 需要引入       list 是在vuex文件夹下的index.js 中定义的list 就是说需要我们共享管理的数据       在页面直接使用 list        就像在本页data的数据一样的使用方法       */      ...mapState(['list'])    }  }</script>
<style scoped>ul{  display: flex;flex-direction: column;}li{  margin-bottom: 5px;}.line{  text-decoration: line-through}</style>

• app.vue

<template>  <div id="app">    <!-- <img src="./assets/logo.png">    <router-view/> -->    <input type="text" v-on:keyup.enter="handleKup">    <ul>      <li>        <router-link to="/all">所有</router-link>      </li><li>        <router-link to="/wait">为完成</router-link>      </li>      <li>        <router-link to="/com">已完成</router-link>      </li>    </ul>    <section>      <router-view></router-view>    </section>  </div></template>
<script>export default {  name: 'App',  methods:{    handleKup(event){      console.log('输入框点击回车')      console.log(event)      console.log(event.target.value)      this.$store.commit('add',{        text:event.target.value,        checked:false      })    }  }}</script>
<style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;  width: 1200px;}ul{  display: flex;  justify-content: center;  }li{  height: 50px;   list-style: none;   width: 100px;   background-color: pink;   line-height: 50px;   margin: 0 5px;}</style>

• wait.vue

<template>  <div>    <h4> 未完成 组件</h4>    <ul>     <li v-for ='item in waitlist' :key="item.id" >        <input v-model="item.checked" type="checkbox">         <span :class='{line:item.checked}' >{{item.text}}</span>      </li>    </ul>  </div></template><script>  import {mapState} from 'vuex';  import {mapGetters} from 'vuex'  export default{    name:'all',    data(){      return {
      }    },    mounted(){
    },    computed:{      /*       使用vuex 中的state的mapState 需要引入       mapState 拿到的是整个state中的数据       list 是在vuex文件夹下的index.js 中定义的list 就是说需要我们共享管理的数据       在页面直接使用 list        就像在本页data的数据一样的使用方法       */      ...mapState(['list']),      /**       * mapGetters 只是获取在state中的getter对象中的处理的函数        * mapGetters([参数])  参数可以是vuex文件夹中的index。js中的getter对象中的方法名字 表示只拿到这个方法中的数据       */      ...mapGetters(['waitlist'])    }  }</script>
<style scoped>ul{  display: flex;flex-direction: column;}.line{  text-decoration: line-through}</style>

注释

• vuex文件夹中的index.js
  

       state 中 list需要共同管理的公共数据

       mutations 中的 add 方法为 all.vue组件中的添加数据的方法

             add参数默认的是state和paylooad各自对应app.vue的this.$store.commit('add',{ text:event.target.value, checked:false }) 

       getters 相当于store 的计算属性 与 mutations 同级

• all.vue

       import {mapState} from 'vuex';

     是引入vuex的方法

     compuate 中的

      /*       使用vuex 中的state的mapState 需要引入       list 是在vuex文件夹下的index.js 中定义的list 就是说需要我们共享管理的数据       在页面直接使用 list        就像在本页data的数据一样的使用方法       */      ...mapState(['list'])

• wait.vue

      import {mapGetters} from 'vuex'

      是引入vuex的方法

      compuate 中的

      /**       * mapGetters 只是获取在state中的getter对象中的处理的函数        * mapGetters([参数])  参数可以是vuex文件夹中的index。js中的getter对象中的方法名字 
       * 表示只拿到这个方法中的数据

       */      ...mapGetters(['waitlist'])

mapGetters （[ 参数 ]） 参数可以是index.js 中的getters的函数名 

mapState （[ 参数 ]） 处理的数据 全部的store 的数据

vuex的状态管理就是各个组件共同管理一些数据