vuex

vuex是什么

vuex的几个核心概念

1.State(放状态信息)

1）state的基础用法就是:将状态信息放入state,state就会帮忙管理，其他组件可以通过 $store.state.属性名称 来进行使用

2）单一状态树
只使用一个store

2.Getters

getters的用法类似于计算属性computed，计算属性的用法就是（当数据想要展示的时候，直接使用就可以，如果数据必须经过一系列变化之后再被使用，就可以通过计算属性完成这些操作）

getters的用法就是（state中存放了一些状态（这些状态可以看成数据），这些数据需要经过一系列变化之后给其他组件使用，则可以在getters里定义各种方法，然后在其他组件中通过 $store.getters.属性名称 来获取对应的数据）

案例一：state中定义了 counter:10000, 现在想得到counter的平方

     const store = new Vuex.Store({
       state: {
          counter: 1000
       },
       getters: {
          powerCounter(state) {
          return state.counter * state.counter;
          }
       },

   <!-- 其他组件中调用 -->
   <div id="app">
      <h2>{{ $store.state.counter }}</h2>

      <h2>{{ $store.getters.powerCounter }}</h2>
  </div>

案例二：state中定义了 关于学生学号、姓名、年龄信息的数组，想要将大于20岁的学生的信息显示出来

  const store = new Vuex.Store({
    state: {
      students: [
       { id: 100, name: "张三", age: 25 },
       { id: 101, name: "李四", age: 18 },
       { id: 102, name: "王五", age: 12 },
       { id: 103, name: "赵四", age: 22 }
      ]
    },
    getters: {
      more20stu(state) {
        return state.students.filter(s => s.age >= 20);
      }
    },

  <!-- 其他组件中调用 -->
  <div id="app">
    <h2>-----大于20的学生的信息------</h2>
    <h2>{{ $store.getters.more20stu }}</h2>
  </div>

案例三：想要获取年龄大于20的学生的个数

    const store = new Vuex.Store({
      state: {
      students: [
       { id: 100, name: "张三", age: 25 },
       { id: 101, name: "李四", age: 18 },
       { id: 102, name: "王五", age: 12 },
       { id: 103, name: "赵四", age: 22 }
      ]
    },
    getters: {
      more20stu(state) {
        return state.students.filter(s => s.age >= 20);
      }，

   <!-- 两种实现方法 -->
      more20stulen(state) {
        return state.students.filter(s => s.age >= 20).length;
      }，
     more20stulength(state, getters) {
        return getters.more20stu.length;
      }
    },

  <!-- 其他组件中调用 -->
  <div id="app">
    <h2>-----大于20的学生的信息------</h2>
    <h2>{{ $store.getters.more20stu }}</h2>

    <h2>----大于20的学生个数为------</h2>
    <h2>{{ $store.getters.more20stulen }}</h2>
    <h2>{{ $store.getters.more20stulength }}</h2>
  </div>

案例四：不提前规定年龄，这个年龄想要通过用户输入一个年龄值，然后返回相符合要求的学生信息

     getters: {
         less20stu(state) {
            return function(age) {
                return state.students.filter(s => s.age <= age);
            };

         }
      }，

   <!-- 其他组件中调用 -->
      <div id="app">
        <h2>-----小于20的学生的信息------</h2>
           <!--用户输入年龄-->
        <h2>{{ $store.getters.less20stu(20) }}</h2>
      </div>

vuex

原文：https://www.cnblogs.com/larissa404/p/14851755.html