五 . Vue状态管理Vuex

概述

vuex是对vue项目进行状态管理的js库，对于所有的组件来说，它是一个中央存储，这种模式就保证了只能按照特定的模式来更改状态。

一 . vuex的五大核心

• state
  说的直白点就是存储数据的地方。

• actions
  通过异步的方式更改状态值，但是不能直接更改，需要借助于mutations来更改。

• mutations
  通过直接同步的方式更改状态。

• getters
  类似于计算属性，通常是需要通过state来间接计算得到的值。

• modules
  一个项目中因为模块的原因，存在着各种不同的状态，需要按照模块来划分。

二 . 使用

2.1 安装vuex

sudo npm install vuex --save

2.2 建立store

新建一个文件夹，名字叫store，在文件夹中新建一个文件，文件名叫index.js，文件内容如下：

index.js

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

Vue.use(Vuex);

//state
const state = {
    todos:[{title:'工作一', complete:true}]
}
// actions
const actions = {
    // 第一个参数必须是context, 第二个参数是需要的业务数据
    addTodo(context, todo){
        // 通过commit的方式提交到mutations, 真正实现对状态修改的其实是mutations
        context.commit('addTodo', todo)
    }
}
// getter,类似于计算属性，需要根据state来计算出其他想要的属性
const getters = {
    completedTodoNumber: state => {
        return state.todos.reduce((preTotal, current) => preTotal + (current.complete ? 1 : 0), 0)
    }
}
//操作
const mutations = {
    //添加待办事项，第一个参数必须是state, 第二个参数是传递过来的数据
    addTodo(state, todo) {
        state.todos.push(todo)
    }
}
// 对外暴露Vuex.Store的对象，在其他任何组件中都可以使用 $store来进行操作
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

2.3 main.js配置

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

new Vue({
    store,   //引入store
    render: h => h(App)
}).$mount("#app");

2.4 组件中使用

this.$store.state.todos    //获取状态值
this.$store.commit('addTodo', todo);  //通过mutations中的方法更新状态
this.$store.dispatch('addTodo', todo); //通过actions中的方法异步更新状态
this.$store.getters.completedTodoNumber;  //获取getters中的属性

2.5 映射函数调用

import {mapState, mapActions, mapGetters, mapMutations} from 'vuex'

computed: {
    ...mapState(['todos']),  //扩展运算符, 在当前组件中直接使用this的方式调用
    ...mapGetters(['completedTodoNumber'])
},
methods: {
    //引号中的内容为actions中定义的方法名, 可以直接使用this.addTodo来调用。
    ...mapActions(['addTodo']),  
    addContent() {
       this.addTodo({
          title: this.content,
          completed: false  //新添加都是未完成
       })
           this.content = '';
    }
}

2.6 Modules

A. 新建一个shopping目录，目录下新建index.js文件，文件内容如下：

const state = {
    todos:[{title:'工作一', complete:true}]
}

const actions = {
    addTodo(context, todo){
        context.commit('addTodo', todo)
    },
    delDone(context) {
        context.commit('delDone')
    },
    delByIndex(context, index) {
        context.commit('delByIndex', index);
    }
}
const getters = {
    completedTodoNumber: state => {
        return state.todos.reduce((preTotal, current) => preTotal + (current.complete ? 1 : 0), 0)
    }
}
//操作
const mutations = {
    //添加待办事项
    addTodo(state, todo) {
        state.todos.unshift(todo)
    },
    delDone(state) {
        state.todos = state.todos.filter(todo => !todo.complete)
    },
    delByIndex(state, index) {
        state.todos.splice(index, 1);
    }
}

export default {
    state,
    actions,
    getters,
    mutations
}

B. 在store下的index.js文件中写入如下内容：

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

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        shopping
    }
})

C. 使用

获取对应模块的state值方式一：
...mapState({todos: state=>state.shopping.todos})
获取对应模块的state值方式二：
todos: function() {
      return this.$store.state.shopping.todos;
}

​ 至于getters、actions、mutations都被注册到全局上，和之前的使用方式一样。