vuex 状态管理模式

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

【一】vuex

【1】原理

【二】使用步骤

【1】安装

cnpm instlal vuex -S

【2】新建 store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

【3】在main.js导入

import store from './store'

【三】使用

• 组件部分：
• Goodlist.vue

<template>
  <div class="good">
    <p>商品名：{{ title }},价格：{{ price }}<button @click="handAdd">加入购物车</button></p>
    <p>商品名：{{ title }},价格：{{ price }}<button @click="handAdd">加入购物车</button></p>
    <p>商品名：{{ title }},价格：{{ price }}<button @click="handAdd">加入购物车</button></p>
  </div>
</template>

• ShoppingCard.vue

<template>
  <div class="shopping">
    <div>
      <span >商品数量{{ $store.state.count }}</span>
    </div>
  </div>
</template>

• HomeVIew.vue

<template>
  <div class="home">
    <shopping-card></shopping-card>
    <hr>
    <goodlist></goodlist>

  </div>
</template>

<script>
import ShoppingCard from '@/components/ShoppingCard.vue'
import Goodlist from '@/components/Goodlist.vue'

export default {
  name: 'HomeView',
  components: {
    ShoppingCard,
    Goodlist
  },
}
</script>

【1】直接操作变量

• Goodlist

methods: {
    handAdd () {
      this.$store.state.count++
    }
  }

【2】间接操作

• action 好比服务员
• methods 好比厨师
• 安全

mutations: {
        addOne(state, num){
            state.count += num
        }
    },
    actions: {
        addcount(store, num){
            store.commit('addOne',num+1)
        }
    },

methods: {
    handAdd () {
      // this.$store.state.count++
      // 间接操作
      this.$store.dispatch('addcount',1)
    }

  }

【3】在store/index.js写代码(一般用不到)

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

Vue.use(Vuex)
// import moduleA from './a'
// import moduleB from './b'
export default new Vuex.Store({
    state: {
        //  定义一些变量
        count: 0
    },
    getters: {
        getCount (state) {
            return state.count+100
        }
    },
    mutations: {
        addOne(state, num) {
            console.log(state)
            state.count += num

        }
    },
    actions: {
        addCount(store, num) {
            // 发送ajax请求--》数据库加入购物车--》返回成功---》本地数量再加1
            console.log(store)
            console.log(num)
            store.commit('addOne', num + 1)
            // 直接操作 ：store.state.count++
            //store.dispatch('actions中的方法')

            }
        },



    modules: {
        // a: moduleA,
        // b: moduleB
    }
})

    
    
# 5 在组件中使用 (拿变量)
    js:this.$store.state.count
    html:$store.state.count
    
# 6 修改变量
    js中：
    	1 this.$store.dispatch('actions定义的函数名',参数)
    	2 this.$store.commit('mutations定义的函数名',参数)
    	3 this.$store.state.count++
   	所有组件中使用到的位置，都会变量
# 7 为什么经过 actions和mutations 
    -可以跟后端交互，可以做数据验证

# 8 getters：
    	可以通过getters获取数据--》对state中的数据，再做处理
    
# 9 modules：
    	分到不同模块中，不同模块有自己的state，actions