开始

vuex CDN

<script src="xx.xxx.xxx"></script>

npm 安裝

npm install vuex --save-dev
// 全局引用 main.js
import Vuex from 'vuex'
Vue.use(Vuex)

Vuex依賴Promise。如果你支持的浏览器并没有实现 Promise (比如 IE)，那么你可以使用一个 polyfill 的库，例如 es6-promise

你可以通过 CDN 将其引入：

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

npm

npm install es6-promise --save # npm
yarn add es6-promise # Yarn

import 'es6-promise/auto'

介绍

vuex是专门为vue.js应用程序开发的状态管理模式。

状态管理包含以下几个部分

• state 驱动应用的数据源
• view 以声明方式将state映射到视图
• actions 响应在view上的用户输入导致的状态变化

注意： 使用外部store.js 需要在main.js中注入 或者在每个需要使用的组件中import 要不然就在main.js中写store的内容

读取state状态

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count: 1
}
const mutations = {
  add: state => state.count += 1,
  reduce: state =>  state.count -= 1
}
export default new Vuex.Store({
  state, mutations
})

计算属性 computed

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。

<template>
  <div class="hello">
    <p>{{count}}</p>
  </div>
</template>
<script>
import store from '@/store/store.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  computed:{
    count() {
      return store.state.count
    }
  }
}
</script>

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

<template>
  <div class="hello">
    <p>{{$store.state.count}}</p>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('reduce')">-</button>
  </div>
</template>
<script>
  import store from '@/store/store.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  store,
  mounted() {
    console.log(this.$store.state.count);
  }
}
</script>

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

mapState 辅助函数

必须得承认，我弄了1天，完完整整，很悲催 光看文是文档还是不明白 还得看大佬们的作业

mapState其实是简化了上面store的获取 将store的state挂载到this上 使用更方便 代码不冗杂

使用时直接获取count

第一种

import { mapState } from 'vuex'
export default {
  data () {},
  computed: mapState({
    count: state => state.count
  })
}

第二种 对象展开运算符 ECMAScript6的方法

import { mapState } from 'vuex'
export default {
  data () {},
  computed: {
    ...mapState(['count'])
  }
}

第三种

import { mapState } from 'vuex'
export default {
  data () {},
  computed: mapState(['count'])
}

贴一下自己的代码

目录

main.js

store.js