[JavaScript知识库]Vue项目导入vuex.js

流程

1. 预备条件

vue项目创建成功后并已经进入项目目录

?

2. 下载 vuex

使用npm install 下载 vuex

终端输入： npm? install vuex@3.1.1? –save

????????????????????????????? 生产模式安装

?

3. 构建一个Vuex.Store类(导出Store)

在项目的src目录下创建一个新目录(自定义名称)并在内部新建index.js

index.js是主构造函数所以名称不能更改

该过程等同于构建一个Vuex.Store类, index.js相当于该类的主构造函数

?

4.定义Vuex.Store类内部的index.js

(1)引入vue和 vuex

import Vue from 'vue'

import Vuex from 'vuex'

(2) 使用Vuex

Vue.use()是用来使用插件的

插件的作用：插件通常用来为Vue添加全局功能

Vue.use(Router)

(3)导出Vue.Store实例(创建实例)

export default：全局配置（暴露给全局）

export default new Vuex.Store({

? ? state:{

? ? ? ? name:'vue.js直接引用'

? ? }

})

(4)main.js导入Vue.Store实例 ??并注册

在入口文件中（main.js）的vue对象中导入定义的Vue.Store实例并注册实例

引入

import store from './s'

注册

new Vue({

? el: '#app',

? router,

? components: { App },

? template: '<App/>',

? store

})

(5)修改App.Vue

mapState是什么？

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

?

要使用mapstate需要从vuex.js中获取

import { mapState } from 'vuex'

?

默认出口中计算属性中使用mapstate辅助函数

它的使用类似箭头函数

export default {

? name: 'App',

? computed:mapState({

? ? ne:state=>state.name

? })

}

?