关于vuex

-主要是应用在vue.js中管理数据状态的一个库
-通过创建一个集中的数据存储，供程序中所有的组件访问--store可以理解为一个单一的数据源。
使用vue.js的场景：

image.png

一个简单的demo

结构：

image.png

在store.js中写入：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
    state: {
        products: [
            { name: 'jame1', age: 8 },
            { name: 'jame2', age: 88 },
            { name: 'jame3', age: 888 },
            { name: 'jame4', age: 8888 },
        ]
    }
})

在main.js中注入store:

import Vue from 'vue'
import App from './App.vue'
import { store } from './store/store'

new Vue({
    store,
    el: '#app',
    render: h => h(App)
})

在组件中写入：

<template>
  <div id="listOne">
    <h2>listOne</h2>
    <ul>
      <li v-for="(product,index) in products" :key="index">
        <span class="name">{{product.name}}</span>
        <span class="age">{{product.age}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default{
  computed:{
    products(){
      return this.$store.state.products; 
    }
  }
}
</script>

app.js中引入组件并传值：

<!--  -->
<template>
  <div id="app">
    <ListOne></ListOne>
    <ListTwo></ListTwo>
  </div>
</template>
<script>
import ListOne from './components/ListOne'; 
import ListTwo from './components/ListTwo'; 
export default {
  data () {
    return {
    };
  },
  created () {
  },
  components: {
    ListOne,
    ListTwo
  },
  computed: {},
  methods: {}
}
</script>
<style scoped>
</style>

下面说一下getters用法

getters我个人的理解就是一个中间件 对数据进行处理的函数
store.js中这样写：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
    state: {
        products: [
            { name: 'jame1', age: 8 },
            { name: 'jame2', age: 88 },
            { name: 'jame3', age: 888 },
            { name: 'jame4', age: 8888 },
        ]
    },
    getters: {
        selePrice: (state) => {
            let selePrice = state.products.map(item => {
                return {
                    name: '__' + item.name,
                    age: item.age * 2
                }
            });
            return selePrice;
        }
    },
    mutations: {
        reducePrice: state => {
            state.products.forEach(item => {
                item.age -= 1;
            })
        }
    }
})

组建中使用：

<template>
  <div id="listOne">
    <h2>listOne</h2>
    <ul>
      <li v-for="(product,index) in selePrice" :key="index">
        <span class="name">{{product.name}}</span>
        <span class="price">{{product.age}}</span>
      </li>
      <button @click="reducePrice">商品降价</button>
    </ul>
  </div>
</template>
<script>
export default{
  computed:{
    products(){
      return this.$store.state.products; 
    },
    selePrice(){
      return this.$store.getters.selePrice;
    }
  },
  methods:{
    reducePrice(){
      this.$store.commit('reducePrice');
    }
  }
}
</script>

关于mutation

• mutation可以实现异步加载

action commit context dispatch payload

• 使用action可以实现异步加载数据同时执行，方便调试；而且可以传参：
  组件中代码：

<template>
  <div id="listOne">
    <h2>listOne</h2>
    <ul>
      <li v-for="(product,index) in selePrice" :key="index">
        <span class="name">{{product.name}}</span>
        <span class="age">{{product.age}}</span>
      </li>
      <button @click="reducePrice(4)">商品降价</button>
    </ul>
  </div>
</template>
<script>
export default{
  computed:{
    products(){
      return this.$store.state.products; 
    },
    selePrice(){
      return this.$store.getters.selePrice;
    }
  },
  methods:{
    reducePrice(amount){
      // this.$store.commit('reducePrice');
      this.$store.dispatch('reducePrice',amount);

}
  }
}
</script>

store.js中代码:

import Vue from 'vue';
import Vuex from 'vuex';
import { setTimeout } from 'timers';
Vue.use(Vuex);
export const store = new Vuex.Store({
    state: {
        products: [
            { name: 'jame1', age: 8 },
            { name: 'jame2', age: 88 },
            { name: 'jame3', age: 888 },
            { name: 'jame4', age: 8888 },
        ]
    },
    getters: {
        selePrice: (state) => {
            let selePrice = state.products.map(item => {
                return {
                    name: '__' + item.name,
                    age: item.age * 2
                }
            });
            return selePrice;
        }
    },
    mutations: {
        reducePrice: (state, payload) => {
            state.products.forEach(item => {
                item.age -= payload;
            })
        }
    },
    actions: {
        reducePrice: (context, payload) => {
            setTimeout(function() {
                context.commit('reducePrice', payload);
            }, 2000)
        }
    }
})