? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?vuex-store解析
5.0------vuex共享 是插件 Single Source of Truth單一狀態(tài)樹--》單一數(shù)據(jù)源 即只推薦使用一個store
? 1.? store文件下 index.js
? ? import Vue from 'vue'
? ? import Vuex from 'vuex'
? ? 1.1.安裝插件
? ? ? vue.use(Vuex)
? ? 1.2.創(chuàng)建對象
? ? const store = new Vuex.Store({? ? ?
? ? ? state:{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Action ->Mutations(先進行修改) ->State(不要在這進行修改)
? ? ? ? ? counter:1000? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Devtools插件 監(jiān)控state的改變（只能監(jiān)控同步操作，直接修改state是監(jiān)控不了）
? ? ? ? ? student:[
? ? ? ? ? ? {name:'1',age:18},? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? {name:'3',age:22},
? ? ? ? ? ? {name:'2',age:30}
? ? ? ? ? ],
? ? ? ? ? info:{
? ? ? ? ? ? ? name:'cobe',
? ? ? ? ? ? ? age:33,
? ? ? ? ? ? ? hobby:hehe
? ? ? ? ? }
? ? ? },-----------------------------------------------
? ? ? ? mutations:{? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? 同步操作?
? ? ? ? ? ? // 定義方法? 只要對state進行修改的內容 都在這里進行狀態(tài)更新
? ? ? ? ? increment(state){? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中用? this.$store.commit('increment') 獲取
? ? ? ? ? ? state.counter++
? ? ? ? ? },
? ? ? ? ? decrement(state){? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中用 this.$store.commit('decrement') 獲取
? ? ? ? ? ? state.counter--
? ? ? ? ? }，
? ? ? ? ? incrementCount(state,count){? ? ? ? ? ? 在App.vue中? <button @click="addCount(5)">+5</button>
? ? ? ? ? ? state.counter += count? ? ? ? ? ? ? ? ? ? addCount(count){? 1.普通的提交封裝
? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$store.commit(' incrementCount',count)
? ? ? ? ? ,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? incrementCount2(state,payload){? ? ? ? ? ? 在App.vue中? <button @click="addCount(5)">+5</button>
? ? ? ? ? ? state.counter += payload.count? ? ? ? ? ? addCount(count){? ? 1.特殊的提交封裝
? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$store.commit({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type:'incrementCount2', count
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ,? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? updataInfo(state){
? ? ? ? ? ? ? ? state.info.name = 'coderwh'? ? ? ? ? ? ? 響應式
? ? ? ? ? ? ? // state.info['address'] = '洛杉磯'? ? ? ? ? ? 增加一個屬性? 沒有響應式
? ? ? ? ? ? ? //? Vue.set(state.info,'address','洛杉磯')? ? 增加一個屬性? 具有響應式
? ? ? ? ? ? ? //? delete state.info.age? ? ? ? ? ? ? ? ? ? ? ? ? 刪除一個屬性? 沒有響應式
? ? ? ? ? ? ? //? Vue.delete(state.info,'age')? ? ? ? ? ? ? ? 刪除一個屬性? 具有響應式
? ? ? ? },?
? ? ? ? ? addStudent(state,stu){? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中? <button @click="addstudent">添加學生</button>
? ? ? ? ? state.student.push(stu)? ? ? ? ? ? ? ? ? ? ? ? addstudent(){? const stu ={name:'4'.age:20}
? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$store.commit('addStudent',stu)
? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },-----------------------------------------------
? ? ? ? actions:{? 異步操作? ? ? 類似于mutations? 修改state內容時，要經過mutations? 在App.vue中? this.$store.dispatch('aupdataInfo',參數(shù))
? ? ? ? ? ? aUpdateInfo(context，payload(參數(shù))){? ? context：上下文 相當于store? ? ? ? ? ?
? ? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? ? ? context.commit('updataInfo')
? ? ? ? ? ? ? },1000)
? ? ? ? ? ? },
? ? ? ? ? ? 異步請求后 ，通知外界
? ? ? 2.1? ? aupdateInfo(context，payload){? ? context：上下文 相當于store? ? ? ? ? ?
? ? ? ? ? ? ? setTimeout(()=>{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中? this.$store.dispatch('aupdataInfo',{
? ? ? ? ? ? ? ? ? context.commit('updataInfo')? 里面提交完成? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? message:'攜帶的信息'
? ? ? ? ? ? ? ? ? ? console.log(payload.message)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? success:()=>{? ? ? console.log('里面已完成')
? ? ? ? ? ? ? ? ? ? payload.success()? 回調? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },1000)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })? ?
? ? ? ? ? ? },?
? ? 2.2? ? aupdateInfo(context，payload){? ? context：上下文 相當于store
? ? ? ? ? ? ? ? return new Promise((reslove,reject)={? ? ? ? ? ? ? ? ? ? 在App.vue中? this.$store.dispatch('aupdataInfo',‘攜帶的信息')
? ? ? ? ? ? ? ? ? setTimeout(()=>{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .then(res=>{
? ? ? ? ? ? ? ? ? ? context.commit('updataInfo')? ? 里面提交完成? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log('里面完成了提交')
? ? ? ? ? ? ? ? ? ? console.log(payload)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(res)? ? ? 打印? hahah
? ? ? ? ? ? ? ? ? ? reslove('hahah')? 向外界傳入參數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })? ? ? ? ? ? ?
? ? ? ? ? ? ? },1000)? ? ?
? ? ? ? ? ? })? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? },? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? },,-----------------------------------------------? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? getters:{
? ? ? ? 類似于計算屬性 進行操作但不對state進行修改? eg:filter 過濾器
? ? ? ? powerCounter(state){? ? ? ? ? ? ? ? ? ? ? 在App.vue中? ? ? <h2>{{$store.getters.powerCounter}}<h2>
? ? ? ? ? return state.counter * state.counter
? ? ? ? },
? ? ? ? more20stu2(state){? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中? <h2>{{$store.getters.more20stu2}}<h2>
? ? ? ? ? return state.students.filter(s=>s.age >20)?
? ? ? ? },
? ? ? ? more20stu2Length(state,getters){? ? 在App.vue中? <h2>{{$store.getters.more20stu2Length}}<h2>
? ? ? ? ? return getters.more20stu2.length
? ? ? },
? ? ? moreAgeStu(state){? ? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中? <h2>{{$store.getters.moreAgeStu(18)}}<h2>? 傳入一個參數(shù)
? ? ? ? return function(age){
? ? ? ? ? return state.student.filter(s=>s.age>age)
? ? ? ? }
? ? ? }
? ? ? },-----------------------------------------------
? ? ? ? module:{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? const moduleA={? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中? <h2>{{$store.state.a.name}}<h2>? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? 劃分專門模塊 進行保存? ? ? ? ? ? ? ? ? state:{? name:'zhangsan'},
? ? ? ? ? a:moduleA? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? mutations:{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中? ? <button @click="updateName">修改名字</button>
? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? updateName(state,payLoad){? ? ? ? ? ? ? ? ? updateName(){? this.$store.commit(' updateName','lisi') }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? state.name = payLoad
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? actions:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? aUpdateName(context){? ? ? ? ? ? 這里的? ? context是本模塊? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果想調用根模塊就調用? context.rootGetters
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? getters:{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fullname(state){? ? ? ? ? ? ? ? ? ? ? ? ? ? 在App.vue中? <h2>{{$store.getters.fullname}}<h2>? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return state.name + 'hahhah'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fullname2(state,getters){? ? ? ? ? ? ? ? 在App.vue中? <h2>{{$store.getters.fullname2}}<h2>? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return getters.fullname + 'hahhah2'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 引用大模塊中state的數(shù)據(jù)-----
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fullname3(state,getters,rootstate){? ? 在App.vue中? <h2>{{$store.getters.fullname3}}<h2>? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return getters.fullname + rootstate.counter
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? })? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? default export store? -----------------------------------------------
? 2.在main.js中? 添加
? ? import store from './store'
? ? new Vue({
? ? ? el:'#app',
? ? ? store,? ? ? ? ? ? 添加這行
? ? ? render:h =>h(App)
? ? })
? 3.在App.vue 中? ? ? ? ? -----------------------------------------------
? 3.1? <template>
? ? ? ? <h2>{{$store.state.counter}}<h2>
? ? ? ? <button @click="$store.state.counter++">+</button>
? ? ? ? <button @click="$store.state.counter++">-</button>
? ? </template>
? ? 3.2? <template>
? ? ? ? <h2>{{$store.state.counter++}}<h2>
? ? ? ? <button @click="additon">+</button>
? ? ? ? <button @click="subtraction">-</button>
? ? ? ? <h2>{{$store.getters.powerCounter}}<h2>
? ? ? ? <h2>{{more20stu}}<h2>
? ? </template>
? ? <script>
? ? ? export default{
? ? ? ? computed:{
? ? ? ? ? more20stu(){
? ? ? ? ? ? return this.$store.state.students.filter(s=>{
? ? ? ? ? ? ? return s.age >= 20
? ? ? ? ? })
? ? ? ? }
? ? ? },
? ? ? ? methods:{
? ? ? ? ? additon(){
? ? ? ? ? ? this.$store.commit('increment')
? ? ? ? ? },
? ? ? ? ? subtraction(){
? ? ? ? ? ? this.$store.commit('decrement')
? ? ? ? ? },
? ? ? ? }
? ? ? }
? ? </script>
5.x-----------es6語法? 對象結構
? const obj = {
? ? ? name:'why',
? ? ? age:18,
? ? ? height:1.9
? ? }
? const {name,height,age} =obj;? 順序可以調換
? console.log(obj.name) =>why? ? console.log(obj.age) =>18? console.log(obj.height) =>1.9
例子：局部狀態(tài)通過context.state 暴露出來，根節(jié)點狀態(tài)則為context.rootState? ? 在上述module中有描述
const moduleA = {
? actions:{
? ? hahaha({state,commit,rootState})
? ? ? ? console.log(rootState)? ? 打印出來的是根節(jié)點對應的內容
? }，
? getters:{
? ? hahaha({state,commit,rootState})
? ? ? return state.count + rootState.count? ? 即本狀態(tài)下的count 加上 根節(jié)點上 count
? ? ? ? console.log(rootState)? ? 打印出來的是根節(jié)點對應的內容
? }
}
