Vue-vueX（十一）

1、什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。vuex一般在大型项目开发中使用

VueX状态管理图

2、vuex的位置以及结构
1）位置：store目录下的index.js文件
2）文件内容：

import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装插件 => vuex是项目开发时使用的状态管理工具
Vue.use(Vuex)

// 2.创建对象并导出
export default new Vuex.Store({
  // state保存状态,可以添加多个状态
  state: {
    counter: 5,
    students:[
      {id:110, name:'lisa',age:10},
      {id:120, name:'lucy',age:24},
      {id:130, name:'jenkins',age:30},
      {id:140, name:'golf',age:18},
    ]
  },
  mutations: {
    // 方法,默认会有一个参数state，就是上面的state
    // 写在这里的方法，需要在要调用此方法的路由里this.$store.commit
  },
  actions: {
  },
  modules: {
  },
  // getters默认是不能传递参数的，如果希望传递参数，那么只能让getters本身返回另一个函数
  getters: {
    // 1.这里的函数也是默认要写一个参数state，其它组件调用的时候不用commit
  }
})

3、挂载到main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4、VueX就像是一个大管家，存放着所有供大家调用的共同资源，如何写呢？
store目录下的index.js代码：
- state:保存共享资源状态的地方，可以添加多个状态，官方建议不要new多个Vuex.Store
- mutation:store状态更新的唯一方式，提交mutation。包含两部分：字符串的事件类型(type)和一个回调函数handler，该回调函数的第一个参数就是state
注意：mutation里只能写同步的代码！！！

import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装插件 => vuex是项目开发时使用的状态管理工具
Vue.use(Vuex)

// 2.创建对象并导出
export default new Vuex.Store({
  // state保存状态,可以添加多个状态
  state: {
    counter: 5,
    students:[
      {id:110, name:'lisa',age:10},
      {id:120, name:'lucy',age:24},
      {id:130, name:'jenkins',age:30},
      {id:140, name:'golf',age:18},
    ]
  },
  mutations: {
    // 方法,默认会有一个参数state，就是上面的state
    // 写在这里的方法，需要在要调用此方法的路由里this.$store.commit
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    }
  },
  actions: {
  },
  modules: {
  },
  // getters默认是不能传递参数的，如果希望传递参数，那么只能让getters本身返回另一个函数
  getters: {
    // 1.这里的函数也是默认要写一个参数state，其它组件调用的时候不用commit
    more20stu(state) {
      // 箭头函数，当代码行只有一行得时候，可以写到一行，不写return
      // 获取年龄大于20岁的students
      return state.students.filter(s => s.age > 20)
    },
    // 2.getters可以链式传递，比如现在需要获得年龄大于20的学生个数
    more20stulength(state, getters) {
      return getters.more20stu.length
    },
    // 3.动态获取，大于参数age的学生
    moreagestu(state) {
      // return function (age) {
      //     return state.students.filter(s => s.age > age)
      // }
      return age => state.students.filter(s => s.age > age)
    },
    // 4.也可以都用箭头函数写，stuById为组件里要调用的方法名
    stuById: state => {
      return id => state.students.filter(s => s.id===id)
    }
  }
})

路由App.vue的代码：

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <!--当counter状态封装在store里时，这里的变量都要用$store.state.counter-->
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction" :disabled="$store.state.counter===0">-</button>
    <!--调用vuex里的getters里的more20stu方法-->
    <h2>年龄大于20的人：{{$store.getters.more20stu}}</h2>
    <h2>年龄大于20的人的个数：{{$store.getters.more20stulength}}</h2>
    <!--$store.getters.moreagestu返回的是一个函数，所以可以传参-->
    <h2>动态获取年龄大于参数age的人:{{$store.getters.moreagestu(20)}}</h2>

    <hello-vuex/>
  </div>
</template>

<script>
  import HelloVuex from "./components/HelloVuex";
  export default {
    name:'App',
    components:{
      HelloVuex
    },
    data(){
      return {
        message:'-------------我是App组件的内容---------------'
        // counter为共享变量，所以封装在store的index.js里,这里就不用写了
        // counter:0
      }
    },
    methods:{
      addition(){
        // 关联vuex里的increment方法，记住一定用commit
        this.$store.commit('increment')
      },
      subtraction(){
        this.$store.commit('decrement')
      }
    }
    // computed: {
    //   more20stu() {
    //     // 箭头函数，当代码行只有一行得时候，可以写到一行，不写return
    //     return this.$store.state.students.filter(s => s.age > 20)
    //   }
    // }
  }

子组件HelloVuex.vue代码：

<template>
    <div>
        <h2>-------------我是HelloVuex里的内容---------------</h2>
        <h2>{{$store.state.counter}}</h2>
        <h2>{{$store.getters.more20stu}}</h2>
    </div>
</template>

<script>
    export default {
        name: "HelloVuex"
    }
</script>

<style scoped>

</style>

5、页面渲染结果

VueX大管家