【vue】Vuex及应用

vuex

介绍

vuex是专门管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态放在一起集中管理。

结构

vuex中最关键的是store对象，并且每个vue应用只对应一个store对象。

一个完整的store结构包含以下

• state 存放状态

• mutations 更改state中的状态逻辑，同步操作

• actions 提交mutation，异步操作

• getters state的计算属性

对于store，有两点需要记住：

1. store中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么响应的组件也会得到更新
2. 不能直接改变store中的状态。改变store的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态变化

安装

vue2的版本需要安装vuex3

npm i vuex@3 --save

vue3的版本需要安装vuex4

npm i vuex@4 --save

模块式开发

在main.js中引入store

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

在src下创建一个store文件夹，新建index.js

并在store分别创建文件夹，每个文件夹就是一个小仓库

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

Vue.use(Vuex);

//引入小仓库
import home from './home'
import user from './user'
import search from './search'

//对外暴露Store类的一个实例
export default new Vuex.Store({
    //实现Vuex仓库模块式开发存储数据
    modules: {
        home,
        search,
        user
    }
});