2.包管理器安装：

npm install es6-promise --save //yarn add es6-promise 

然后，将下列代码添加到你使用 Vuex 之前的一个地方：

import 'es6-promise/auto'

三、使用

（1）使用介绍

1.搭建store实例

①. 在创建vuex实例的地方引入vue、vuex，使用vuex：

import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex
Vue.use(Vuex); //使用 vuex

②. 如果你的actions中用到 store.dispath() ,要引入store

import store from './store' //引入状态管理 store

③. new 一个 Vuex.Store 实例，并注册 state、mutations、actions、getters到 Vuex.Store 实例中

ps. 你可以像上面那样将“属性和值”直接写在实例中，当代码量大时，你也可以分别写个.js文件，如下图：

然后引入到 store/index.js 注册到vuex实例中，如：

2.创建好 vuex.store 后，你需要在入口文件 main.js 中引入 store 并注册到 vue 实例中，这样就可以在任何组件使用store了：

3.在组件中使用：

①. 引入vuex中各属性对应的辅助函数：

import {mapActions, mapState,mapGetters} from 'vuex' //注册 action 、 state 、getter

②. 使用store中的状态数据、方法：

使用方法有很多，这种事最简单实用的，更多可以查看官网学习：https://vuex.vuejs.org/zh/

（2）具体demo

来个简单易懂的计数

eg：store.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入 vuex
import store from './store' //注册store
Vue.use(Vuex); //使用 vuex
export default new Vuex.Store({
 state: {
 // 初始化状态
 count: 0,
 someLists:[]
 },
 mutations: {
 // 处理状态
 increment(state, payload) {
 state.count += payload.step || 1;
 }
 },
 actions: {
 // 提交改变后的状态
 increment(context, param) {
 context.state.count += param.step;
 context.commit('increment', context.state.count)//提交改变后的state.count值
 },
 incrementStep({state, commit, rootState}) {
 if (rootState.count < 100) {
 store.dispatch('increment', {//调用increment()方法
 step: 10
 })
 }
 }
 },
 getters: {
 //处理列表项
 someLists: state =>param=> {
 return state.someLists.filter(() => param.done)
 }
 }
})

使用时，eg：

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //引入状态管理 store
Vue.config.productionTip = false
new Vue({
 router,
 store,//注册store(这可以把 store 的实例注入所有的子组件)
 render: h => h(App)
}).$mount('#app')

views/home.vue：

运行结果：

博客地址：https://my.oschina.net/wangnian

閱讀更多 程序員小新人學習 的文章

關鍵字: 路由器 脚手架 技术