vueX状态管理

1. 安装vuex

1.1 使用vue-cli新建项目时,可以选择是否安装vuex;

选择vue-cli安装项目完成后,在目录结构中会自动生成 store文件夹,里面自动生成index.js文件

1.2 使用npm安装vuex

• 安装命令:npm install vuex -s

• 在src目录下新建store文件夹,然后再该文件夹中新建index.js文件

• 初始化index.js内容
  

• 将store挂载到vue实例中

  打开main.js,添加如下内容
  

然后就可以在组件中使用vuex了.

1.3 安装 VueDevtools

为了更好的查看vue项目中数据的变化,推荐安装该开发工具,使用vuex时尤为推荐使用.

2. vuex核心概念

1. state

   存放所有组件公共数据,即存在这里的数据,所有组件都可以使用.

2. mutations

   操作state的函数,vuex规定,所有的操作state数据,都需要通过mutations进行,同时该函数是同步的.

3. getters

   可以理解成计算属性,可以将state中的数据经过某种变化后展示

4. action

   异步操作

5. module

   模块化管理

3. 使用

3.1 state的使用

• 在/src/store/index.js中写上

• 在组件中使用

• 界面展示

3.2 mutations的使用

3.2.1 mutations是对state里的数据进行操作的,比如我想修改state的值,就需要在这里使用

在组件中使用

3.2.2 mutations传递参数

3.3 getters的使用

可以理解成计算属性,可以将state中的数据经过某种变化后展示.

3.3.1 需要计算count的平方

找到age>15的数据

在组件中使用

3.3.2 需要计算超过15岁的个数

3.4 action的使用

3.4.1 异步修改state里的值

在组件中

store/index.js里

3.4.2 修改完成给出修改完成通知

3.5 modules使用

3.5.1 state使用

3.5.2 mutations使用

注意:模块里的mutations方法名和store的mutations方法名不能重复

3.5.3 getters使用

如果在模块里getters想要获取store里面的数据

模块里的getters可以传三个参数

3.5.4 actions使用

4. 测试代码

//这个组件全都是操作
<template>
    <div>
        <p>这里是Home组件</p>
        <button @click="add">+1</button>
        <button @click="sub">-1</button>
        <button @click="addCount(5)">+5</button>
        <button @click="addCount(10)">+10</button>
        <button @click="addPersion">添加person</button>
        <button @click="addzhangsan">添加张三属性</button>
        <button @click="delzhangsan">删除张三属性</button>
        <button @click="editAction">action修改</button>
        <button @click="changeGame">修改模块里的数据</button>
        <button @click="moduleAction">异步修改模块里的数据</button>
       
    </div>
</template>

<script>
import * as types from '../store/mutations-types'

export default {
    methods:{
        add(){
            this.$store.commit(types.ADD) //这里是常量的方式
        },
        sub(){
            this.$store.commit('sub')
        },
        addCount(count){
            this.$store.commit('addCount',count)
        },
        addPersion(){
            const person ={id:5,age:30}
            this.$store.commit('addPerson',person)
        },
        addzhangsan(){
            this.$store.commit('addzhangsan') 
        },
        delzhangsan(){
            this.$store.commit('delzhangsan')
        },
        /*
        // 方式一
         editAction(){
            this.$store.dispatch(types.EDITACTION,{ //可以使用一个对象来包裹携带的参数和修改完成后的通知
                message:'这里是需要传递的参数',
                success:() => {
                    console.log('修改成功了');
                }
            })
        }
         */
        
        /**
         * 方式二
         */
        editAction(){
            this.$store.dispatch(types.EDITACTION,'我是传递的参数').then(() => {
                console.log('里面完成了提交');
            })
        },
        changeGame(){
            this.$store.commit('changeGame')
        },
        moduleAction(){
            this.$store.dispatch('moduleAction')
        }
       
    }

}
</script>

 

//这个组件都是界面展示
<template>
    <div>
         <p>这里是Mine组件</p>
         <span>{{$store.state.count}}</span><hr>
          <span>{{$store.state.name}}</span><hr>
          <span>{{$store.state.person}}</span><hr>
          <span>count的平方是{{$store.getters.power}}</span><hr>
          <span>超过15岁{{$store.getters.ageMore15}}</span><hr>
          <span>超过15岁个数{{$store.getters.ageMore15Length}}</span><hr>
          <span>张三{{$store.state.zhangsan}}</span><hr>
          <span>module里面的数据是::{{$store.state.a.game}}</span><hr>
          <span>module里面的getters::{{$store.getters.newGame}}</span><hr>
          <span>module里面getters获取store里的数据::{{$store.getters.newGame2}}</span><hr>
    </div>
</template>

<script>
export default {

}
</script>

//这里都是store/index.js


import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutations-types'

Vue.use(Vuex)
const moduleA = {
  state: {
    game: '英雄联盟'
  },
  mutations: {
    changeGame(state) {
      state.game = '守望先锋'
    },
    editGame(state) {
      state.game = '刺激战场'
    }
  },
  getters: {
    newGame(state) {
      return state.game + 'plus'
    },
    newGame2(state, getters, rootState) {
      return getters.newGame + rootState.count
    }
  },
  actions: {
    moduleAction(context) {
      setTimeout(() => {
        context.commit('editGame')
      }, 1000)
    }
  }
}
const moduleB = {
  state: {},
  mutations: {},
  getters: {},
  actions: {}
}

export default new Vuex.Store({

  state: {
    count: 100,
    name: '张三',
    person: [
      { id: 1, age: 10 },
      { id: 2, age: 15 },
      { id: 3, age: 20 },
      { id: 4, age: 25 }
    ],
    zhangsan: { // state定义好的的数据都是响应式的,如果往里面添加一个属性,就不是响应式,需要使用 Vue.set()
      name: '张三',
      age: 18,
      sex: '男'
    }
  },
  mutations: {
    // add(state) {
    //   state.count++
    // },
    [types.ADD](state) { //这里是常量的方式
      state.count++
    },
    sub(state) {
      state.count--
    },
    addCount(state, count) {
      state.count += count
    },
    addPerson(state, person) {
      state.person.push(person)
    },
    addzhangsan(state) {
      // 这种写法只是在数据变化了,但是界面没有刷新
      // state.zhangsan['height'] = '1.88'
      Vue.set(state.zhangsan, 'height', '1.88')
    },
    delzhangsan(state) {// 删除属性
      Vue.delete(state.zhangsan, 'sex')
    },
    editzhangsan(state) {
      state.zhangsan.name = 'lisi'
    }
  },
  getters: {
    // 主要是针对 state里的数据经过某种变化后才展示的数据
    power(state) {
      return state.count * state.count
    },
    ageMore15(state) {
      return state.person.filter(i => i.age > 15)
    },
    //获取超过15岁的个数
    ageMore15Length(state, getters) { //这里的getters参数指的是gettters对象,可以直接拿到getters李的方法
      return getters.ageMore15.length
    }
  },
  actions: {
    /**
     * //方式一
     *   [types.EDITACTION](context, payload) {
      setTimeout(() => {
        context.commit('editzhangsan') //这里依旧执行的mutations对象里的方法
        console.log(payload.message); // 这边接收传递过来的参数和通知
        payload.success();
      }, 1000)
    }
     */

    /**
     * //方式二
     */
    [types.EDITACTION](context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('editzhangsan') //这里依旧执行的mutations对象里的方法
          console.log(payload);
          resolve()
        }, 1000)
      })
    }

  },
  modules: {
    a: moduleA,
    b: moduleB
  }
})

// 作为mutations的常量

export const ADD = 'add' //add 相当于type
export const EDITACTION = 'editAction'