vuex

一.认识

为什么要用vuex，父子组件之间的传递原来使用emit，props等方法，vuex相当于一个全局存储，所有组件都可以从中拿数据

二.配置

1.整体配置

1. 下载（注意vue2对应vuex3版本，vue3对应vuex4）

   npm i vuex --save/-S
   

2. src目录下新建store文件夹，文件夹下新建index.js

   import Vuex from 'vuex'
   import Vue from 'vue'
   
   // 使用安装
   Vue.use(Vuex)
   
   // 初始化
   const store = new Vuex.Store({
     // 配置（state|mutations|actions）
   })
   
   export default store
   

3. main.js中引用

   import store from '@/store'
   new Vue({
     // 把store对象挂载到vue实例对象中，这样就可以在所有的组件中获取store中的数据了
     store,
     render: h => h(App),
   }).$mount('#app')
   

2.state存储数据

1. 存储数据(store下index.js)

   // 初始化vuex对象
   const store = new vuex.Store({
     state: {
       // 管理数据
       count: 0,
       count1: 1,
     }
   })
   

2. 组件中使用：

   2.1原始使用插值表达式

   <div>A组件 state的数据：{{$store.state.count}}</div>
   

   2.2使用计算属性（基础）

   <div>A组件 state的数据：{{count}}</div>
   

   // 把state中数据，定义在组件内的计算属性中
   computed: {
     // 1. 最完整的写法
     // count: function () {
     //   return this.$store.state.count
     // },
     // 2. 缩写
     count () {
       return this.$store.state.count
     }
   }
   

   2.3使用‪计算属性（mapState对象）注意：在mapState中不用this.$store，写法略有不同

   <div>A组件 state的数据：{{count}}</div>
   

   import {mapState} from 'vuex'
   //computed在data同级
   computed: mapState({
   //1. 基础写法 (state) 代表就是vuex申明的state 
       count: function(state) {
           return state.count
       }  
   //2. 使用箭头函数
       count: state => state.count
   //3. vuex提供写法 ('count'是state中的字段名称)
   	count: 'count',
   //4. 当你的计算属性 需要依赖vuex中的数据 同时  依赖组件中data的数据
   	count (state) {
       	return state.count + this.num
   	}
   })
   
   

   另一种写法，'count'为store中的

   computed:{
       ...mapState({
           count: 'count'
       })
   }
   
   

   2.4使用计算属性（mapState数组）

   //这种写法是state中定义的数据和组件中引用的名称一样，template中直接{{count}}引用即可，在methods直接this.count即可
   computed:{
       ...mapState(['count','count1'])
   }
   
   

3.mutations修改状态

1. 修改函数（store下index.js）

   // mutations是固定的，用于定义修改数据的动作（函数）
   mutations: {
       // 定义一个mutation，用于累加count值
       // increment这个名字是自定义的
       increment (state, payload) {
           // state表示Store中所有数据
           // payload表示组件中传递过来的数据
           state.count = state.count + payload
       },
       decrement (state, payload) {
         state.count = state.count - payload
       }
   }
   
   

2. 组件中调用（基础）

   //需要调用commit方法，用来触发store中的mutations下的函数
   <template>
     <div class="hello">
       <p>测试区1：{{$store.state.count}}</p>
       <p>测试区2：{{count}}</p>
       <button @click="handclick1">+2</button>
       <button @click="handclick2">-1</button>
     </div>
   </template>
   
   <script>
   import {mapState} from 'vuex'
   
   export default {
     name: 'HelloWorld',
     data () {
       return {
         msg: 'Welcome to Your Vue.js App'
       }
     },
     computed:mapState({
       count:function(state){
         return state.count +2
       }
     }),
     methods:{
       handclick1(){
         this.$store.commit('increment',2)
       },
       handclick2(){
         this.$store.commit('decrement',2)
       }
     }
   }
   </script>
   
   

3. 组件中调用（mapMutations）

   <template>
     <div class="hello">
       <p>测试区1：{{$store.state.count}}</p>
       <p>测试区2：{{count}}</p>
       <button @click="handclick1">+2</button>
       <button @click="handclick2">-1</button>
     </div>
   </template>
   
   <script>
   import {mapState,mapMutations} from 'vuex'
   
   export default {
     name: 'HelloWorld',
     data () {
       return {
         msg: 'Welcome to Your Vue.js App'
       }
     },
     computed:mapState({
       count:function(state){
         return state.count +2
       }
     }),
     methods:{
       handclick1(){
         this.decrement(2)  //注意此处写法，一旦使用mapMutations，就相当于把方法映射到组件中，直接用this调用即可
       },
       handclick2(){
         this.increment(2)
       },
       ...mapMutations(['increment','decrement'])  //'increment'为store中mutations中方法
     }
   }
   </script>
   
   

4.异步操作action

1. 修改函数（store下index.js）

   导入： npm i axios

   import Vuex from 'vuex'
   import Vue from 'vue'
   import axios from 'axios' 
   // 使用安装
   Vue.use(Vuex)
   // 初始化
   const store = new Vuex.Store({
     // 配置（state|mutations|actions）
     state:{
         count:0,
         list:[]
     },
     mutations:{
         updateList(state,payload){
             state.list = payload
         }
     },
     actions:{
         async querydata(context,payload){
             const ret = await axios.get("http://x")
             //commit用来触发mutations中对应的函数
             context.commit('updateList',ret.data.list)
         }
     }
   })
   
   export default store
   
   

2. 组件中使用（基础）

   methods: {
       handleQuery () {
           // 触发action(必须调用dispatch方法)
           this.$store.dispatch('queryData', 111)
       }
   }
   
   

3. 组件中使用（mapActions）

   <template>
     <div class="hello">
       <p>测试区1：{{$store.state.count}}</p>
       <p>测试区2：{{count}}</p>
       <button @click="qu">+2</button>
     </div>
   </template>
   
   <script>
   import {mapState,mapMutations} from 'vuex'
   
   export default {
     name: 'HelloWorld',
     data () {
       return {
         msg: 'Welcome to Your Vue.js App'
       }
     },
     computed:mapState({
       count:function(state){
         return state.count +2
       }
     }),
     methods:{
       qu(){
           this.queryData(2)
       }
       ...mapActions(['queryData'])  //将store中mapactions中对应的方法映射到组件中
     }
   }
   </script>
   
   

5.getters用法

1. 定义getters（store下index.js）

   // 相当于state的计算属性（基于State处理成另外一份数据）
   // getters的主要应用场景：模板中需要的数据和State中的数据不完全一样
   // 需要基于state中的数据进行加工处理，形成一份新的的数据，给模板使用
   import Vuex from 'vuex'
   import Vue from 'vue'
   
   // 使用安装
   Vue.use(Vuex)
   
   // 初始化
   const store = new Vuex.Store({
     // 配置（state|mutations|actions）
     state:{
         count:0,
         list:[0,1,2,3,4,5,6,7,8]
     },
     getters:{
         getParlist(state){
             return state.list.filter(item=>{
                 return item > 1
             })
         }
     }
   })
   export default store
   
   

2. 组件中调用（基础）

   caleList () {
     // 注意：获取getters的值，不需要加括号（当属性使用）
     return this.$store.getters.getPartList
   },
   
   

3. 组件中调用（mapgetters）

   import { mapGetters } from 'vuex'
   // mapGetters的作用：把getters映射为计算属性
   computed: {
       ...mapGetters(['getPartList']),//template中调用，{{getPartList}}
       // ...mapGetters({             //下面两种调用，{{calcList}}
       //   calcList: 'getPartList'
       // }),
       // calcList () {
       //   // 注意：获取getters的值，不需要加括号（当属性使用）
       //   return this.$store.getters.getPartList
       // },
   }