vuex理解

vuex 状态管理

1. 项目中并不是所有的状态都需要在vuex中进行管理。比如普通的父子组件值的传递，我们直接在组件内部进行实现就可以。项目中经常使用的token，购物车数据(购物车数据会使用到我们的结算页面，结算页面可能会对购物车的商品数量和种类进行修改或删除，修改后并不提交订单，再次回到商品页面添加商品，这里使用vuex数据管理就比我们使用本地缓存和链接携带字符串的方式更好一些)，或者用户的权限表就可以考虑放到vuex中，如后台管理系统中，前端权限控制，会使用到用户权限，路由的动态加载(二级路由，三级路由)，页面的按钮权限，都会用到用户的权限信息去做，当我们登录时后台会反回用户的登录信息和权限，我们可以将这个信息存放到我们本地缓存，同时页存放到vuex中去，在我们做前端权限管理时，就可以直接通过vuex中的state去使用我们的存放权限表，而不用从本地缓存中进行获取。
2. 状态管理的四个属性 state存放数据 getters计算属性 mutations同步任务，修改state中的数据，actions异步操作。
3. 使用vuex时要注意版本。vue2.0只支持vuex4.0以下版本。vue3.0支持vuex4.0的版本。

一般项目中目录结构 src 下建立一个store文件夹 文件夹内容包括一下
state.js  getters.js  mutations.js  actions.js  index.js
在index.js 中引入其他四个js文件 index.js 作为一个统一管理的文件，方法的定义都在各自的js中完成

vuex 在项目中的常用结构index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
})

export default store


下面简单栗子演示vuex的使用
单独src下创建一个store 文件
文件下创建一个store.js
建立关联
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) 

注册属性
const state = {
       a:0
}
const getters = {
    fn(state,val){
        return state.a ++
    }
}

const mutations = {
    fn1(state,val){
        return state.a ++
    }
}

const actions = {
    fn2(content,val){
        content.commit('fn1',val)
    }
}
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})






main.js 中先将 vuex 和 vue进行关联
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import store from './store/store' //引入vuex仓库实例的对象
Vue.use(Vuex) // 关联
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store, //将 vuex实例对象挂载到vue实例
}).$mount('#app')

state 存放数据的基础仓库。管理我们的数据

getters 计算属性，缓存我们的数据并返回 ，内部数据发生更新时，返回新的数据，在我们组件中使用的方法

fn标记为函数名

1：直接在html 页面中使用{{$store.getters.fn}} 
2：直接在computed 中使用

定义参数
state:{
    content:0,
    pric:[
        {
            title:'电饭煲',
            pric:10
        },
         {
            title:'热水器',
            pric:20
        }
    ]
}

这里栗子：简单写一下getters
getters:{
    order(state){
        reutrn state.content ++
    },
    pric(state){
        return state.pric
    }
}
<div>{{order}}</div>
conputed:{
   order(){
       //这里要主要注意使用return
       return this.$store.getters.fn
   }
}
3:使用工具函数mapGetters
import {mapGetters} from 'vuex'
<div>{{order}}</div>
<div>{{pric}}</div>
computed：{
    //函数中传入getters上定义的函数名 在页面中直接使用 {{fn}}  fn表示工具函数中的函数名
    ...mapGetters(['order','pric'])
}


mutations修改数据时的动作在此处执行
mutations:{
      add(state,val){
          state.content = val
      }
}
在组件中调用方式  commit  同步的调用方式 
this.$store.commit('add',val)

actions执行异步行为 dispath 异步的调用方式
actions：{
    content是调用mutations中方法的一个对象
    getList(content,val){
        //通过content可以在异步任务中拿到返回结果后，
        //使用mutations 中的同步方法 ，实现某些值进行修改 。
        //不可直接在actions 中进行值修改，不符合涉及规范
        content.commit('add',val)
    }
}
在组件中调用actions 中的方法
this.$store.dispath('fn',val)