vuex 使用过程+ ...mapState+...mapMutation + localStorage

野性酷女 2021-10-09 04:28 427阅读 0赞

# vuex使用过程:   [vuex官网连接][vuex] #

按照官网的过程:从components开始-> actions->mutations->改变state

![70][]

创建一个src/store/index.js:

![70 1][]

先引入:vuex, vue中使用插件是用Vue.use(vuex), 输出一个Vuex.Store实例

// state放公用数据

//action放 异步操作或者批量处理同步操作  (简单情况可跳过action直接到mutations)

两个参数:上下文环境, 传参---使用ctx.commit( , )方法去调用mutations里面的方法名.

// mutations放置用来改变数据的方法.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。参数是state

//getters 类似computed方法,进行数据的计算

![70 2][]

//modules 用来Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割,然后组合到一起：

![70 3][]

### 使用过程: ###

组件里使用state里面的公共数据: \{ \{this.$store.state.city\}\}

组件派发异步或批量事件给actions: this.$store.dispatch(' action函数名', 参数)

actions提交mutations来改变数据:this.$storage.commit('mutations函数名', 参数)

![70 4][]

![70 5][]

![70 6][]

基本使用方法如上.但是一般会把各部分内容分开写(state,actions,mutations,modules,getter),统一到store/index.js文件里:

![70 7][]

![70 8][]

![70 9][]

![70 10][]

![70 11][]

# vuex高级使用: #

直接使用:

![70 12][]

## 高级使用: ...mapState  ...mapMutations  ...mapGetters ##

##### 扩展运算符...mapState,意思是把vuex的state数据映射到计算属性里面,映射后的名字为city,所以上面直接用this.city,就不用写this.$store.state.city这个长串了      #####

**/src/pages/home/components/header.vue**

**1....mapState**

![70 13][]

## ![70 14][]    ##

## 2....mapMutations使用    ##

src/pages/city/components/list.vue

![70 15][]

...mapMutation把本组件的mutations映射到changeCity方法里(changeCity在mutations里)

之前写法是this.$store.commit('changeCity',city)

引入之后的写法:

![70 16][]

## localStorage用法:直接使用 ##

注意:要用  try()\{\}catch(e)\{\}包裹使用,因为有的浏览器会禁用localStorage或者不能用

let defaultCity = "北京"

try\{  
    if(localStorage.city)\{   
     defaultCity = localStorage.city  
    \}

\} catch (e)\{\}

try\{  
localStorage.city = city  
\}catch(e)\{\}

![70 17][]

[vuex]: https://vuex.vuejs.org/zh-cn/actions.html
[70]: /images/20211009/17c389f01abe4ce0a679e11d19eaa915.png
[70 1]: /images/20211009/74657acc23a340b0830fc393b78a92b2.png
[70 2]: /images/20211009/03cb5a96a9224981b91ad8a561b9da1c.png
[70 3]: /images/20211009/e8417937b7954441b6bd88b63399ee45.png
[70 4]: /images/20211009/5eb12cdb3405450e97d359df1293c33f.png
[70 5]: /images/20211009/59fcb26a1422410ab2fc5f6f70fb4edd.png
[70 6]: /images/20211009/e12a20bf661b4215a43f6219a3b757af.png
[70 7]: /images/20211009/b109144921d14cf29a41b683559f0f7c.png
[70 8]: /images/20211009/8a222dbde4d241bc841399831a9b6b70.png
[70 9]: /images/20211009/914f2d62412e48f0ac6a91b27c24881f.png
[70 10]: /images/20211009/4efc3d87c9794e47b1e4cd2ca629ab18.png
[70 11]: /images/20211009/072cf396cd5441fcb35227ed7cd8a49c.png
[70 12]: /images/20211009/649c7e0dea74420085308a4170b05180.png
[70 13]: /images/20211009/a3737f55abf742d69466afacd3c62c10.png
[70 14]: /images/20211009/2743492ad79a49a8a4c84d56aa865f35.png
[70 15]: /images/20211009/0fa9870499ce414cb8f73ecb7fb89b45.png
[70 16]: /images/20211009/6c8f5e18732448bfb93fb1fe2eb26f04.png
[70 17]: /images/20211009/7ea13d7eccb14431af67794230a83226.png