cnpm install vuex -S
步骤一：先定义vuex核心的文件夹 store 并在里面加入 index.js
1、不使用 modules 的情况下，所有的文件都在 index.js中定义
state 定义字段，类似我们的页面的data
actions 这个阶段用来请求后台数据，然后把后台数据给发送到 mutations 函数方法里面
mutations 可以做逻辑操作，跟 methods 一样
getters 将state里面定义的字段发送出去
store->index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//1 定义字段，类似我们的页面的data
state: {num: 10,goods: []},
//3 这个阶段是可以做逻辑操作，跟 methods 一样 //这里的调用有两种，
(1)actions里面调用，commit('mutations里面定义的方法名',具体的参数)
(2)页面上通过 this.$store.commit('mutations里面定义的方法名',具体的参数)
mutations: {
mAdd(state, count) {console.log(state,count);state.num = state.num + count},
addShopping(state, name) {state.goods.push(name)}
},
//2 一般情况不用这个，这个阶段用来请求后台数据，然后把后台数据给发送到 mutations 函数方法里面
actions: {
// 至少要有一个参数，context上下文对象,触发mutations中函数执行，或者直接改state中数据都可以
add(context, count) {
// 使用commit，触发mutations中得函数
// console.log(context,count)
context.commit('mAdd', count) // 会触发mutations中得mAdd的执行
},
addShopping(context, name) {//下面的注释是伪代码
// 1.这里起ajax请求，检查name库存够不够,2.假设库存不够，弹个不够的消息,3.alert('库存不够了')
// 4.return
context.commit('addShopping', name)
} }})
步骤二：在main.js中引入store，然后可以在页面用 this.store来调用store
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'///////////////////////////////////////////////////////////////////
import Vuex from "vuex"; // 引入vuex核心库////////////////////////////////////////////////
import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Vuex) // 应用Vuex插件 也就是将Vuex插件加入到Vue对象的对象属性中
Vue.config.productionTip = false
Vue.use(elementui)
new Vue({
router,
store,//////////////////////////////////////////////////////////////////////////////////////
render: h => h(App)
}).$mount('#app')
步骤三：在具体页面上使用(带modules的)，比如HomeView.vue页面
views->HomeView.vue
<template>
<div class="home">
<h1>1 vuex的使用 -基本使用(操作state的数据)</h1>购物车商品数量：{{ $store.state.num }}
<br><button @click="handleAdd">点我加购物增1</button>
<h1>组件间通信</h1>
<ul><li>苹果<button @click="add('苹果')">+</button></li><li>桃子<button @click="add('桃子')">+</button></li><li>梨<button @click="add('梨')">+</button></li></ul>
<br><ShppingCard></ShppingCard>
</div>
</template>
<script>import ShppingCard from "@/components/ShppingCard";
export default {
name: 'HomeView',data() {return {}},
methods: {
handleAdd() {
// this.$store.state.num += 1// 1 直接操作
// this.$store.dispatch('add', 2) //add 必须是action中得函数// 2 正统方式，通过dispatch触发actions
this.$store.commit('mAdd', 3)// 3 直接操作mutations
},
add(name) {
// this.$store.state.goods.push(name)// 1 直接操作
this.$store.dispatch('addShopping', name)// 2 正常套路
} },
components: {ShppingCard} }
</script>
components->ShppingCard.vue
<template><div>购物车商品：{{ $store.state.goods }}</div></template>
<script>export default {name: "ShppingCard"}</script>