vuex简单使用

https://vuex.vuejs.org/zh/installation.html

npm install vuex --save

新建store.js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        itemsList: [  ]
    },
    mutations: {
    },
    actions: {
        getitemsListAction() {}
})

main.js 中引入store.js文件

import store from './store/store'


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

HelloWorld.vue

this.$store.dispatch("getitemsListAction") 事件分发（方法名）
dispatch事件分发--》action (store.commit)异步请求数据，commit将数据提交到mutation中寸起来--》mutation数据存储（状态修改）

<template>
  <div>
    <div>{{logo}}</div>
    <div v-for="(item,index) in $store.state.itemsList" :key="index">{{item.id}}{{item.text}}{{item.done}}</div>
    <input type="text" @change="setUser" v-model="username" />
    <div>store里的数据{{$store.state.count}}</div>
  </div>
</template>

<script>

export default {
  props: ["logo"],
  data() {
    return {
      username: "",
    
    };
  },
  methods: {
    setUser() {
      this.$emit("userChange", this.username);
    }
  },
  mounted(){
   if (this.$store.state.itemsList.length==0) {
      this.$store.dispatch("getitemsListAction")
    }else{
     console.log("使用缓存数据");    
    }
  }
  
};
</script>

<style>
</style>

App.vue中引入子组件

 <HelloWorld :logo="logoMsg" @userChange="userchange" />
  data() {
    return {
      logoMsg: "Hello World"
    };
  },
  methods: {
    userchange(msg) {
      console.log("子组件向父组件传值", msg);
    }
  }

• Uniapp 不可以在页面中直接引用vuex 数据，需要在data 中进行转换赋值

this.count=this.$store.state.count

• mapState
  itemList(vuex 中的数据)

import {mapState} from 'vuex'

computed:{
    ...mapState(['itemList'])   //es6展开,合并运算符
},

• store.js 中对数组镜像过滤

    // 对数据进行过滤
    getters:{
        itemListGetters(state){
            return state.itemList.filter((item,index)=>index<3)
        }
    }

如何在页面中引用

this.$store.getters.itemListGetters